HTML5学习（六）：表单

表单

• 在现实生活中表单用于提交数据
• 在网页中也可以使用表单（form），网页中的表单用于将本地的数据提交给远程的服务器
• 属性action，表单要提交的服务器的地址

文本框
数据要提交到服务器中，必须要为元素指定一个name属性值，自定义。

<input type="text" name="username">

密码框
数据要提交到服务器中，必须要为元素指定一个name属性值，自定义。

<input type="password" name="password">

提交按钮
value 为按钮上显示的文字

<input type="submit" value="注册">

单选框
为同一组单选框指定同一个name
必须要措定一个value属性，value属性最终会作为用户填写的值传递给服务器
checked 表示默认选中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多选框
与单选类似

<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>

下拉列表
selected 表示默认选中

<select name="haha">
    <option value="i">选项一</option>
    <option value="ii" selected>选项二</option> 
    <option value="iii">选项三</option>
</select>

按钮

<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

上面两种写法实际上效果是一致的，区别在于：

• input是自闭合标签，不需要</input>就能结束；button不是自闭合标签，跟一般标签一样是成对出现的
• button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签