form表单基础知识，以及H5新属性总结

梦里梦外; 2022-05-18 02:24 272阅读 0赞

HTML中的表单用于搜集不同类型的用户输入；所有的HTML表单元素都可以划分成两类  
1：输入类表单  
2：非输入类表单  
下边将总结每一个表单元素的使用

## 一：form表单基础知识 ##

**1：form标签**

form标签中有两个属性，分别是action和method  
1：action属性指定表单要提交的目标文件的路径，一般都为后台服务器的文件；  
2：method属性指定的数据传输的方式，有get和post两种（两者之间所有的比较都是相对的）  
1）get：是表单的默认传输方式，他的传输速度较快，但是缺点是传输数据的量有限，而且传输数据的保密性得不到保障。  
2）post：post的特点相对于get来说他的传输速度较慢，但是优点是传输数据的量大，而且对于数据的保密性也得到了保障。

**2：普通的文本输入框**

用户名：<input type="text" name="uname" value="请在此输入用户名">

![这里写图片描述][70]  
分析：  
1：type=“text”，表示这个输入框是一个普通的文本输入框；  
2：name=“uname”，注意name属性在所有的form元素中都必须设定！！！后台提取信息的时候要通过name来进行提取。  
3：value：“”，这里的value值是表示的默认值，并不是传输到后台的值。输入类的form元素可以不用设置value属性，因为输入值就是value；  
例如这个姓名输入框，是以键值对的形式传输到后台的name=“张三”，value属性只不过是增强用户体验。但是在非输入框中就必须要设置value值，后边会进行详细的介绍。

**3：密码输入框**

密码：<input type="password" name="pwd">

![这里写图片描述][70 1]  
分析：  
1：type=“password”，会将输入的内容自动转换成黑点保密图形。  
2：在这里name同样是不可省略的。后台通过name来拿到具体的值，  
他传到后台的值是 pwd=“密码”。

**4：单选框**

性别：
        <input type="radio" name="sex" value="man" checked>男
        <input type="radio" name="sex" value="woman">女

![这里写图片描述][70 2]  
分析：  
1：type=“radio”，将表单元素设定为单选框，要求只能选择一个选项。  
2：name=“sex”，可以注意到，两个选项的name全部都是一样的，都为sex！！  
在这里name有两个作用：1）具有分组的作用，将这两个选项都分在同一个组中，进行数据传输的时候方便后台找到数据。2）使选项具有互斥的作用，首先限定了radio其次同一个name就决定了他只能有一个选项。  
在传输的时候，他的形式为： sex=“man”；  
3：value属性的属性值是必须要写的，他会告诉后台这个选项所代表的意义，所以是必不可少的。  
4：checked属性，在h5中较为简便，原来的写法是check=“checked”；表示默认选项。

**5：复选框**

爱好：
        <input type="checkbox" name="hobby" value="fb" checked>足球
        <input type="checkbox" name="hobby" value="bb">篮球
        <input type="checkbox" name="hobby" value="pb">排球
        <input type="checkbox" name="hobby" value="ib">乒乓球
        <input type="checkbox" name="hobby" value="yb">羽毛球

![这里写图片描述][70 3]

分析：  
1：type=“checkbox”，定义为复选框，可以选择多个。  
2：name=“hobby”，这里的name和单选框中的name不一样，他的作用只是为了分组方便后台拿到传输的数据，他传输数据的形式为： hobby=“yb”&hobby=“pb”，用连接符&进行连接。  
3：value属性的属性值是必须要填写的，他将告诉后台用户选中的选项所代表的的意义，也就是键值对的半边部分。  
4：checked，默认选项，可以默认选择多个。

**6：下拉列表**

籍贯：
        <select name="home">
            <option value="sd" selected>山东</option>
            <option value="sx">山西</option>
            <option value="hn">河南</option>
            <option value="bj">北极</option>
            <option value="nj">南极</option>
        </select>

![这里写图片描述][70 4]

1：select标签是下拉列表，其中option是选项。  
2：name属性不用给每一个选择项都添加，只需要添加在select标签中即可，用于唯一标示这个form表单元素，方便后台提取数据。  
3：value属性：每一个选择项的值，和单选框复选框一样，你必须要去给每一个选择项添加value值。  
4：selected属性，要注意区分单选和复选框，他们的默认选项是用checked标记的，下拉列表框使用selected标记的。  
5：下拉列表框中，如果设置了multiple=“multiple”就可以使用ctrl键进行点击选择多个选项。

**7：文本输入域**

问题描述：
        <textarea name="question" cols="15" rows="5">请在此写下问题</textarea>

![这里写图片描述][70 5]

分析：  
1：textarea 文本输入域；可以输入多行文本；  
2：cols=“15” rows=“5” 定义文本输入域为5行15列；  
3：name属性，依旧必不可少。  
4：在textarea标签包裹的文字是在框中的提示文字。  
5：要注意原始样式，他的文字是在输入框的左下角的，后期需要使用css进行调整。

**8：上传文件**

上传文件：<input type="file">

![这里写图片描述][70 6]

**9：提交按钮**

![这里写图片描述][70 7]  
![这里写图片描述][70 8]

**分析：提交按钮不用写name；**

**10：fieldset进行表单区域划分**

<fieldset>
            <legend>
                基本个人信息
            </legend>
            姓名：<input type="text" name="uname">
            <br>
            密码：<input type="password" name="pwd">
            <br>
            性别：<input type="radio" name="sex" value="man">男
            <input type="radio" name="sex" value="wm">女
        </fieldset>

![这里写图片描述][70 9]  
分析：  
1：使用fieldset将一部分表单元素包裹起来。  
2：使用legend标签设置标题。  
3：同一个表单中可以有多个fieldset分区。

## 二：表单H5新增表单元素和新属性 ##

**一：新增表单元素**

邮箱：<input type="email">
        
        输入网址：<input type="url">
        
        输入日期：<input type="date">
        
        输入时间<input type="time">
        
        请输入月份：<input type="month">
        
        请输入周：<input type="week">
        
        请输入数字：<input type="number">
        
        滑动条：<input type="range">
        
        请输入颜色：<input type="color">

分析：作为新的表单元素，他起到了一定的验证功能，但是他的验证功能并不严谨，需要配合js中的正则表达式进行处理

**二：新增表单属性**  
1：autocomplete 。autocomplete设置输入框自动提示，输入框会自动保存前边所输入的数据，再一次输入时会有历史数据的提示。autocomplete="off"可以关闭。  
2：autofocus=“true” 自动获取输入框的焦点；  
3：required 设置必填项 （减少后台工作量，防止错误），在默认情况下，有些表单元素是可以不用填的。  
4：placeholder=“请输入姓名” ，和输入框的value属性不同，这个不是默认值，他是一个提示信息，苹果机中大量使用，他会在输入框中显示属性值。简约风。  
5：readonly属性，只读。常用于系统自动分配用户名，只能看，不能修改。  
6：form属性，表单外的表单项，使用form和id相关联。  
这是智能表单，在form标签中设置id属性，在表单外的表单元素中设置form属性，使form属性值和id属性值相等。就可以进行关联。

<form action="kk.java" id="sss" method="get">
    用户名：<input type="text" name="name">
    密码：<input type="password" name="pwd">
    </form>
    
    性别：
    <input type="radio" name="sex" value="man" form="sss"> 男
    <input type="radio" name="sex" value="wm" form="sss">女

**应用场景：**  
举个例子，在淘宝浏览商品信息，并且下单后，同时他也会将你的用户的个人信息给输出出来，这里两个信息不是放在一个表单中的，但是使用了form属性进行了关联，可以达到这种智能表单的效果。

## 最后总结： ##

1：name属性在所有的表单元素中都需要写  
2：value属性在输入元素中可以不用写，在非输入元素中必须要写；  
3：在单选框和多选框中name属性的作用有什么区别  
4：在单选和复选框中默认值用checked标记，在下拉列表框中用selected标记。  
5：知识点很零碎，但是他的应用是很便捷的，也是易于理解的，多整理，多思考。

[70]: /images/20220518/1d1be6f8141c4d0ab602a3d12eea631e.png
[70 1]: /images/20220518/52c5b4aae07444c987ac98ab84b5edbb.png
[70 2]: /images/20220518/6bf3651df7104bcbbc8dad2442898fd3.png
[70 3]: /images/20220518/5d923a41bec741b59babf3e0767b4e49.png
[70 4]: /images/20220518/0ce178c2ca524ce0892b5db1dcc872ea.png
[70 5]: /images/20220518/194322f7144c4ee6a1f2cb0783564b13.png
[70 6]: /images/20220518/c193b8ae389c40a5841d004f75207f8d.png
[70 7]: /images/20220518/432a70d84fe4493c8fa555b8d86cbab8.png
[70 8]: /images/20220518/3ed161890af640788f53598140674711.png
[70 9]: /images/20220518/b93b8aff835c4e0aa3ca9edb939f697d.png