HTML表单全面知识点

大家好，我是带风的pose哥，这期我来为大家梳理一下有关HTML表单知识，接下来我将以四个方面阐述表单的相关知识，另外添增注意事项讲解！
1. 表单分组
fieldset：对表单进行分组，一个表单可以有多个fieldset。（注：自带边框）
legend：对该组fieldset表单的描述。（相当于标题）

2. form属性
(1)action: 该属性用来指定处理数据程序的URL地址
(2)method：该属性用来指定数据传输到服务器的方式。有两种属性值：post和get
(3)name: 用来指定表单的名称
(4)target：属性值有_blank(在新窗口打开) 、_self（在同一窗口打开）、_parent（在上一级窗口打开）、_top（在浏览器整个窗口打开，忽略任何框架）

框架代码：

<fieldset width="500">
    <legend align="center">请填写注册信息</legend>
	<form action="http://www.baidu.com" 
	method = "post" name="for" target="_blank">
	</form>
</fieldset>

3. 表单信息分类

文本框

<span>请输入你的姓名：</span>
<input type="text" name="name" required="required">
<! 注意：requied代表必填项，在表单提交之前必须填写>

单选框

<input type="radio" name="sex" value="Male">男 
<input type="radio" name="sex" value="Female">女
<! 注意：每个选项的name属性值必须相同>

复选框

<span>请选择你的爱好: </span>
<input type="checkbox" value="music" name="like[]">音乐 
<input type="checkbox" value="chess" name="like[]">象棋
<input type="checkbox" value="travel" name="like[]">旅游

效果图：

下拉选择列表

<span>请选择你的地区:</span> 
		<select name="area" id="cc">
			<option value="gz">广州</option>
			<option value="mz">梅州</option>
			<option value="hz">惠州</option>
			<option value="zq" selected="selected">肇庆</option>
		</select>
		<!注意：selected代表首选项>

4. 相关属性

5. 完整代码

<fieldset width="500">
    <legend align="center">请填写注册信息</legend>
	<form action="http://www.baidu.com" method = "post" name="for" target="_blank">
		<li><span>请输入你的姓名：</span><input type="text" name="name" required="required" placeholder="姓名"></li>     <!文本框 >

		<li><span>请输入你的年龄：</span><input type="number" name="age" placeholder="年龄"></li>     <!数字框>

		<li><span>请输入你的密码：</span><input type="password" maxlength="15" name="password" placeholder="密码"></li>    <!密码框 maxlength:最大输入字符数>

		<li><span>请选择你的性别：</span><input type="radio" name="sex" value="Male">男 <input type="radio" name="sex" value="Female">女 </li>   <!单选框 每个选项必须取相同的name属性，否则将出现多选的情况>

		<li>
			<span>请选择你的爱好: </span>
			<input type="checkbox" value="music" name="like[]">音乐 
			<input type="checkbox" value="chess" name="like[]">象棋
			<input type="checkbox" value="travel" name="like[]">旅游
		</li>    <!复选框>                               

		<li>
		<span>请选择你的地区:</span>  <!下拉选择列表> 
		<select name="area" id="cc">
			<option value="gz">广州</option>
			<option value="mz">梅州</option>
			<option value="hz">惠州</option>
			<option value="zq" selected>肇庆</option>
		</select>
	    </li>
	    <li><span>自我描述：</span><textarea cols="30" rows="10" name="introduction"> </textarea></li>    <!文本域 cols：宽度  rows: 高度>

		<li><input type="submit" value = "提交"> <!按钮> <span><input type="reset" value="重置"></li> 
	</form>
	</fieldset>

6. 效果预览