HTML表单元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/AnyBisks/article/details/78674454

本文详细介绍了HTML中的各种表单元素及其属性，包括文本输入框、密码框、单选框、复选框、下拉列表等，并展示了如何使用这些元素构建完整的表单。

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

HTML标签学习4

1.form 表单学习
2.input输入框表单学习
3.按钮表单学习
4.file表单学习

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单学习</title>
	</head>

	<body>
		<!--form 表单域
			属性 action:处理信息
			Method=”get | post”   
				Get通过地址栏提供（传输）信息，安全性差。
				Post 通过1.php来处理信息，安全性高。
		-->
		<form action="stu07-08table.html" method="get">
			<!--fieldset 分组标签-->
			<fieldset id="">
				<legend>标签学习</legend>
				<!--
				文本输入框 type="text"
				maxlength='10'      限制输入的字符长度
				readonly="readonly" 设置为只读状态（不能编辑）
				disabled="disabled" 未激活，这个输入没有激活，不能用
				name="username"     输入框的名称
				value="张三"			输入框的值	
				-->
				<input type="text" name="username" maxlength='10' value="张三" />
				</br>

				<!--
					密码输入框 type="password"
					!文本输入框的属性对密码输入框都有效。
				-->
				<input type="password" name="password" />
				</br>

				<!--
					单选框
					同一组中，把name设置为同一个
					checked="checked" 设置默认选中
				-->
				<input type="radio" name="gender" id="" value="0" checked="checked" />男
				<input type="radio" name="gender" id="" value="1" />女
				</br>

				<!--
					下拉列表
					multiple="multiple"  设置下拉可以多选
					selected="selected"  设置下拉默认选中
				-->
				省：
				<select name="">
					<option value="0">江西</option>
					<option value="1" selected="selected">江苏</option>
					<option value="2">广东</option>
				</select>
				市：
				<select name="">
					<option value="">南京市</option>
					<option value="" selected="selected">苏州市</option>
					<option value="">常州市</option>
				</select>
				区：
				<select name="">
					<!--下拉信息分组-->
					<optgroup label="苏州市">
						<option value="">吴中区</option>
						<option value="">工业园区</option>
						<option value="">相城区</option>
						<option value="">新区</option>
					</optgroup>
					<optgroup label="南京市">
						<option value="">吴中区</option>
						<option value="">工业园区</option>
						<option value="">相城区</option>
						<option value="">新区</option>
					</optgroup>
				</select>
				</br>

				<!--
					多选框
					checked="checked" 默认选中
				-->
				<input type="checkbox" checked="checked" />初中
				<input type="checkbox" checked="checked" />高中
				<input type="checkbox" checked="checked" />大学
				</br>

				<!--
					多行文本框
					cols="150" 控制输入字符长度
					rows="10"  控制输入的行数
				-->
				<textarea cols="150" rows="10"></textarea>
				</br>

				<!--文件上传控件-->
				<input type="file" />
				</br>

				<!--文件提交按钮（可以实现from提交按钮）-->
				<input type="submit" name="" id="" value="提交按钮" />
				</br>

				<!--普通按钮（不可实现from提交按钮）-->
				<input type="button" name="" id="" value="普通按钮" />
				</br>

				<!--图片按钮（可以实现from提交按钮）-->
				<input type="image" src="../../img/1.png" value="图片按钮" />
				</br>

				<!--重置按钮（将信息重置为初始状态）-->
				<input type="reset" value="重置按钮" />
				</br>
			</fieldset>

		</form>
	</body>

</html>