html 表单

form为html表单  定义方法<form> 内容 </form>

1、input元素是最重要的表单元素，text文本，number数字，date日期，radio单选框，checkbox复选框，password密码，submit提交是input中最常用的type类型。使用方法如下：

<form>
    <br/>
    <input type="radio" name="sex" value="男" checked>男<br/>
    <input type="radio" name="sex" value="女">女<br/>
    <input type="submit" value="性别">
</form>

效果图：

其中radio表示是一个复选框，name表示提交时的key，value表示实际提交时的value值，checked表示默认选中项，男是显示给用户看到的效果，submit为提交，点击时就会获取 ?name="sex"&value="男"；form有一个请求方式method，有get和post两种请求方式，其中get为默认的请求方式，上面红色部分显示的就是get请求方式；form还有一个action，这个action指向请求的链接地址，默认为当前页面的链接。

2、fieldset 用于组合表单中的数据，legend为fieldset定义标题，使用如下：

<form method="get">
    <fieldset style="width: 300px">
        <legend>个人信息:</legend>
        First name:<br>
        <input type="text" name="firstName" value="李明">
        <br>
        Last name:<br>
        <input type="text" name="lastName" value="李小明">
        <br><br>
        <input type="submit" value="提交">
    </fieldset>
</form>

效果图：

3、select 下拉列表 (只可选择，不可输入)

<form>
    <select name="books" id="book">
        <option value="Android书籍">Android书籍</option>
        <option value="JAVA书籍">JAVA书籍</option>
        <option value="PHP书籍">PHP书籍</option>
    </select>
    <input type="submit" value="提交">
</form>

其中提交时name books的值既是下面选中的value的值。

效果图：

4、datalist 是input元素规定的预定义选项列表 可实现输入选项并自动实现模糊搜索

<form>
    <input list="books" name="book">
    <datalist id="books">
        <option value="Android书籍">
        <option value="JAVA书籍">
        <option value="PHP书籍">
    </datalist>
    <input type="submit">
</form>

其中，input 中的list="books",必须与下方的datalist id="books"保持一致。

注意：Safari 或 IE9（以及更早的版本）不支持 datalist 标签。