HTML表单

最新推荐文章于 2025-07-10 18:05:30 发布

咖木

最新推荐文章于 2025-07-10 18:05:30 发布

阅读量6.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习 HTML

本文链接：https://blog.youkuaiyun.com/dongdaxiaopenyou/article/details/79336684

前端学习同时被 2 个专栏收录

18 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

一、

form标签两个最重要的属性：action 和 method

input的type类型有很多，这里有text和password两种

button的type类型默认为submit，另外还有button, reset类型

=================================================================

二、

GET 和 POST的区别：

1.GET就是从服务器获取到东西，POST是向服务器发送东西

2.GET不会造成对服务器数据上的改动，是一种比较安全的操作，没次GET操作返回的结果都是一样的

3.POST每次提交到服务器理论上来说对服务器的内容是有修改的，每次提交都是不一样的

4.在缓存上二者会有差异：GET端可能是从浏览器这一端，包括代理服务器，或者是中间的运营商，在各个环节对于GET请求来说可能是缓存的；但是浏览器不会去缓存任何POST请求。

5.数据传输的方式有区别：GET把要发送的字段通过http的url一次性地发送给服务器；POST会对要发送的字段编码，放到http的body里面提交过去，而http里面head和body里面的内容是分两次发送过去的

比如说用户名是aaa密码是bbb那么用GET就是在url后面加?然后用&(and)连接在一起发送给服务器

如果改成POST

此时URL里面没有附加任何东西，但是body里面有编码后的发送字段

主要把握一个原则，就是请求获取数据就用GET，发送数据就要POST

=================================================================

三、转义字符 URL Incode

假如输入的用户名或密码里面有空格，用户名a b，密码c d

那么服务器端会对发送来的数据进行解码，

服务器把空格替换成了加号。

那么如果输入加号会怎么样呢？加号有另外的编码规则：

可以看到+被替换成了%

那么发送来的数据是已经编码后的数据，（这里要注意编码的规则），那么服务器端如何解码呢？

在JS里面会有decodeURIComponent()方法

可以看到%被复原回来成为+但是+还是+没有被替换成空格

四、

HEAD只会返回Header里面的东西不会返回正文

PUT就是向服务器存储一个东西

DELETE就是删除数据

OPTIONS和HEAD一样不会有具体的body返回，就是用来返回HTTP有哪些HEADER的选项。假如你有一个AJAX的请求而且这个请求是跨域的，这个时候浏览器就得知道你服务器端是不是允许跨域，他就像服务器发送一个OPTIONS请求看一下服务器端返回的结果是否允许跨域，如果允许那么就继续POST否则就拒绝了

五、

服务器通过name确定是哪个input，value是默认值，placeholder属性是告诉用户没填写的时候的一个提示

自动focus，方便用户直接进入输入框，比如搜索引擎的输入框

六、

七、

HTML5里面内置了很多验证规则：

如，required, minlength, maxlength

还有就是正则表达式验证规则

原生验证的及时性不是很好

八、

type也可以提供验证功能

input的type有很多，比如text, password, search, email, url

search在手机上的键盘布局和text不一样，里面会有一个搜索项

email会自动有一个@

九、

novalidate：不要验证

在form里面写novalidate可以用自己写JS实现验证

十、单选框

十一、复选框

十二、使用label对form标签里的输入选项做一些易用性的提升

label标签的for属性值指向某个input元素的id，当点击label的时候会触发该input元素。lable标记元素与表单元素配合,当点击lable中的文本时,表单控件会获得焦点。

把input写在label里面也可以实现关联

十三、select下拉框

默认是单选下拉框，要想实现多选需要加入multiple，size表示显示几个选项

十四、分组 optgroup

十五、

Hidden

十六、<input type="file">

HTML5的form标签的enctype属性有3个属性值：

application/x-www-form-urlencoded——默认值

multipart/form-data——这是文件上传必须选择的

text/plain——不进行任何编码

加一个multiple属性可以实现多选文件上传

同样是用boundary分割的

如果不限制图像的格式，可以写为：accept="image/*"。

如果只可以接受 GIF 和 JPEG 两种图像，可以写成accept="image/gif, image/jpeg"

十七、

date, datetime-local, month, week, time

十八、

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form oninput="ratio.value = parseFloat(hight.value) / parseFloat(weight.value)">
        身高(CM):120<input type="range" min="120" max="230" step="1" id="hight" value="175">230
        <br/> 体重(KG):
        <input type="number" min="25" max="300" step="1" id="weight" value="55"><br/> 身高/体重：
        <output name="ratio" for="hight weight"></output>
    </form>
</body>

</html>