HTML 表单用于搜集不同类型的用户输入。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
HTML表单
表单使用表单标签 <form> 来设置。action 属性定义在提交表单时执行的动作,就是提交的路径;method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
<form action="www.baidu.com" method="get/post">
.
input elements
.
</form>```
**输入元素**
多数情况下被用到的表单标签是输入标签(<input>)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
**单行文本域**
文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
账号: <input type="text" name="username">
</form>
**密码字段**
密码字段通过标签<input type="password"> 来定义,密码字段字符不会明文显示,而是以星号或圆点替代。
<form>
密码: <input type="password" name="pwd">
</form>
**单选按钮**
<input type="radio"> 标签定义了表单单选框选项。
<form>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</form>
**复选框**
<input type="checkbox"> 定义了复选框。 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="read">读书
<input type="checkbox" name="vehicle" value="music">听歌
<input type="checkbox" name="vehicle" value="study">学习
</form>
**隐藏域**
<input type="hideen">定义了隐藏域。隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。
<form>
<input type="hidden" name="hidden" value="hiddenInfo">
</form>
**提交按钮**
<input type="submit"> 定义了提交按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。
<form >
<input type="submit" value="Submit">
</form>
**下拉列表**
<select> 元素定义下拉列表:
<form >
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
</form>
**多行文本域**
<textarea> 元素定义多行输入字段(文本域):
<textarea name="message" rows="10" cols="30">
content
</textarea>
**按钮**
<button> 元素定义可点击的按钮:
<form >
<button type="button" >Click Me!</button>
</form>