html怎么一键整理,HTML整理 （form）

form标签

作用

发送get或者post请求，然后刷新页面

属性

action:action="/xxx"

设置你想服务器提交的url

autocomplete:自动填充

默认情况下，浏览器会记录用户网页上提交的输入框的信息。这使得浏览器能够提供自动补全(在用户开始输入的时候给用户提供可能的内容)和自动填充(在加载的时候预先填充某些字段)功能。这两个功能可能会涉及泄露用户的隐私，所以有些时候开发者会选择将它关闭以达到目的。但是如果真的关闭，会导致html违反了标准1.3.5，所以有很多时候autocomplete并没有起到想要的效果

method:指定请求的发送方式

name:设置表单的名字(注意，因为id在html4中并不推荐，所以最好我们用id代替)

target:属性和a相似

事件

onsubmit:当form提交的时候触发

对代码如下添加onsubmit事件后，当点击提交后，出来的效果如下

提交

复制代码

请注意，form标签，一定要有一个提交按钮，不管是用input还是用button，请千万不要忘记！

input标签

作用

让用户输入内容

属性

type

里面可以填充的属性有button/checkbox/email/file/hidden/number/password/radio/search/submit/tel/text

依次对上述进行演示:

首先是button和submit，对下面三个代码比较

提交

复制代码

表现都是

这三个不同的元素的区别在于：当type="button"是，点击提交并不会触发表单的提交，而对于button和input两个不同标签效果是一样的，点击时触发表单的提交，但是不同在于button可以对它里面的文字作出各种样式的改变，而input只能依靠value确定它内部的值

对于password,text，一般做如下代码演示：

请输入用户名:

请输入密码:

复制代码

对于其中的text,当type='search'的时候，基本功能和text相同，但是可以通过user agent进行不同样式的设置。

当输入值并提交后，提交后根据form中的action的值到达的url后面会多两个查询参数：??text=但是&password=dsa

对于checkbox,这边展示一个它与label连用，做一个选择框

This is the first checkbox

This is the second checkbox, which is checked

复制代码

对于radio,跟上面的checkbox功能相似，但是表现形式如下：

checked>

Huey

Dewey

Louie

复制代码

此时只能选择一个！

其他的基本上用法跟上面表示的用法相似，不再一一举例，根据不同的需求，确定input内的值，比如说需要提交一个文件，那么type='file'，比如说要写一个email地址，那就type='email'。特别的，有时候需要做一个隐藏按钮，比如说正被请求或编辑的内容的 ID，或是一个唯一的安全令牌，此时这些数据需要在url中提交，但是又不想被用户看见，就可以在input内加上type='hidden'

其他

name/autofocus/checked/disabled/maxlength/parttern/value/placeholder

name

一般来说，大部分在表单内的input值都需要有一个name,从而作为input单元控件的名字，以名字/值的形式随表单一起提交

value

表单控件的值，以名字/值的形式随表单一起提交

autofocus

这个布尔属性允许您指定的表单控件在页面加载时具有焦点(自动获得焦点),此时页面总是会首先聚焦在写着autofocus的地方(以第一个为准)

checked

在checkbox的时候使用，效果如上面checkbox演示的，默认选择一个值

disabled

禁用此时的表单空间，比如我将,显示的效果如图：

maxlength

如果 type 的值是 text, email, search, password, tel, 或 url，那么这个属性指明了用户最多可以输入的字符个数

parttern

当type的值是password, text, tel的时候，作为比较value值的模板

placeholder

当表单控件的value为空时，默认显示的内容，请看效果

事件

onchange:当表单元素发生改变并提交时

onfocus:当标签获取焦点的时候触发

onblur:当元素失去焦点的时候触发

验证器

Would you prefer a banana or cherry?

Submit

复制代码

此时在input内增加一个required,就是一种验证器，此时input内的值必须输入

其他输入标签

select+option

textarea

label

特别注意：

1.一般我们不监听input的click事件

2.form里面的input要有name

3.form里要放一个type=submit的元素才能触发提交事件

复制代码