表单常用控件

最新推荐文章于 2024-11-16 22:18:23 发布

小贾爱编程

最新推荐文章于 2024-11-16 22:18:23 发布

阅读量606

点赞数

分类专栏： .NET 文章标签：表单常用控件

本文链接：https://blog.youkuaiyun.com/qq_37589387/article/details/88647226

版权

.NET 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了HTML中常用的表单控件，包括文本框、密码框、单选按钮和复选框。文本框用于用户输入简单文本，如姓名、地址，可设置初始值、宽度和最大长度。密码框则确保输入内容的安全，字符不可见。单选按钮让用户选择一个选项，如性别，通过name属性确保互斥。复选框允许用户多选，如专业、爱好等，其值和name属性可根据需求设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本框：作用：让用户填写简单的文本内容，如姓名、地址等。语法示例<input type="text" value="小王” size=“20” maxlength="10" name ="userName"/> 属性说明：1.type=“text” 表示“单行”文本输入框2.value=“小王”定义文本框初始值，可以由用户填写3.size=“20”定义文本框宽度，单位是单个字符宽度4. maxlength=“10” 表示可输入的最多文本字符长度 5.name="userName"定义文本框的名称，要保证后台数据的准确获取，必须定义一个独一无二的名称。

表单提交时将name和value通过action的指向发送到特定的服务器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action =" " method="post" name="myform">
			用户名:<input type="text" value="小王" name="userName" size="20" maxlength="10"/>
		</form>
	</body>
</html>

密码框：

作用：用户输入密码时字符被保护，其他人无法看见，保证安全

语法示例：<input type="password" size="20 maxlength="10" name="userPwd" />

属性说明：type=“password” 表示密码输入框，其他同文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action =" " method="post" name="myform">
			用户名:<input type="text" value="小王" name="userName" size="20" maxlength="10"/><br>
			密码:<input type="password" size="20" maxlength="10" name="userPwd" />
		</form>
	</body>
</html>

单选按钮：

作用：用户每次只能选择一个选项，如性别等。

语法示例：<input type="radio" value ="男" checked="true" name ="userGender" />

属性说明：

1.type="radio" 表示单选按钮。2.value=“男” 该值应该显示声明。3.checked=“true” 表示默认选中，可以为false

4.name="userGender" 在同一组中应该名称相同，以保证互斥

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action =" " method="post" name="myform">
			用户名:<input type="text" value="小王" name="userName" size="20" maxlength="10"/><br>
			密码:<input type="password" size="20" maxlength="10" name="userPwd" /><br>
			性别:<input type="radio" value="男" checked="true" name="userGender">男
			<input type="radio" value="女" name="userGender">女
			
		</form>
	</body>
</html>

复选框

作用：允许用户在多个选项中选择一个以上内容，如专业、爱好等。

语法示例：<input type="checkbox" value="计算机" name="major" />

属性说明;

1.type="checkbox" 表示复选框 2.value="计算机" 表示复选框值 3.name="major" 可以重名也可以不重名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action =" " method="post" name="myform">
			用户名:<input type="text" value="小王" name="userName" size="20" maxlength="10"/><br>
			密码:<input type="password" size="20" maxlength="10" name="userPwd" /><br>
			性别:<input type="radio" value="男" checked="true" name="userGender">男
			<input type="radio" value="女" name="userGender">女<br>
			专业：<input type="checkbox" value ="计算机" name="major"/>计算机
			<input type="checkbox" value="文学" name="major" /> 文学
			<input type="checkbox" value="美术" name="major"  /> 美术
			
		</form>
	</body>
</html>