input 框

1. form 标签（淘汰，一般用ajax数据交互）

<form action="" method=""></form>

（1）form 表单数据提交需要刷新整个网页，ajax局部刷新

（2）form是块元素

（3）method ： 数据提交方式； action：提交地址

<input type="" name="" placeholder="">

    type: 输入信息的类别
    name： 数据名称，用于后台处理
    placeholder: 提示信息

2. 文字输入

    <form action="">
        用户名: <input type="text" placeholder="请输入用户名">
    </form>

3. 邮箱输入

邮箱地址需要满足邮箱格式

    <form action="">
        邮箱: <input type="email" placeholder="请输入邮箱地址">
    </form>

4. 密码输入

    <form action="">
        密码: <input type="password" placeholder="请输入密码">
    </form>

5. 数字输入

    <form action="">
        数字: <input type="number" placeholder="请输入数字" step=10 value=0>
    </form>

（2）step: 步长；上下按钮调节

（3）max： 最大值
（4）min：最小值

（5）value：默认值

6. 滑块

    <form action="">
        <input type="range">
    </form>

7. 日期和时间

    <form action="">
        <input type="date">
    </form>

    <form action="">
        <input type="time">
    </form>

8. 颜色输入

    <form action="">
        <input type="color">
    </form>

9. 文件选择

    <form action="">
        <input type="file" multiple>
    </form>

multiple属性可以添加多个文件

10. 按钮与提交

    <form action="">
        <input type="button" value='提交'>
        <input type="submit" value='提交'>
    </form>

当type为submit时，此时input元素显示为一个按钮， 按钮中的文字由元素标签内部value属性中的文字决定，点击此按钮就会向服务器提交整个表单的所有数据

11. 单选多选

（1）单选

    <form action="">
        <input type="radio" value='male' name='sex'> 男
        <input type="radio" value='female' name='sex'> 女
    </form>

name相同才能做到单选

（2）多选

    <form action="">
        <input type="checkbox"> python
        <input type="checkbox"> java
        <input type="checkbox"> shell
        <input type="checkbox"> web
    </form>

12. label元素（扩大按钮选择区域）

    <form action="">
        <input type="checkbox" id='python'> <label for="python">python</label>
        <input type="checkbox" id='java'> <label for="java">java</label>
        <input type="checkbox" id='shell'> <label for="shell">shell</label>
        <input type="checkbox" id='web'> <label for="web">web</label>
    </form>

label元素：扩大用户选中input元素的区域，for属性值对应input元素的id名

13. 下拉框

    <form action="">
        <select name="" id="">
            <option value="">武汉</option>
            <option value="">长沙</option>
            <option value="" selected>广东</option>
            <option value="">石家庄</option>
            <option value="">深圳</option>
            <option value="">上海</option>
        </select>
    </form>

说明：
（1）select元素：创造一个下拉选项列表，select中的name值表示这个下拉选项列表的名称
（2）option元素：创造一个下拉选项列表中的具体选项，option中的value值表示用户选择这个选项后，表单向服务器发送的数据
（3）selected：默认选择

14. 文本输入区域

    <form action="">
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>

15. 表单分组

    <form action="">
        <fieldset>
            <legend>模拟单选按钮</legend>
            <input type="radio"> 男
            <input type="radio"> 女
        </fieldset>
    </form>

fieldset ：表单分组
legend：标题

16. 图片

    <input type="image" src="img/searchbt.gif" class='btn'>