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 action="./index.html" method="get" autocomplete="on" id="form" onsubmit="alert('我被提交了')">
    <input type="text">
    <button type="submit">提交</button>
</form>

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

input标签

作用

让用户输入内容

属性

type

里面可以填充的属性有button/checkbox/email/file/hidden/number/password/radio/search/submit/tel/text
依次对上述进行演示: 首先是button和submit，对下面三个代码比较

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

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

    <p>
        <label for="text">请输入用户名:</label>
        <input type="text" id="text" name="text">
    </p>
    <p>
        <label for="password">请输入密码:</label>
        <input type="password" id="password" name="password">
    </p>

对于其中的text,当type='search'的时候，基本功能和text相同，但是可以通过user agent进行不同样式的设置。
当输入值并提交后，提交后根据form中的action的值到达的url后面会多两个查询参数：??text=但是&password=dsa 对于checkbox,这边展示一个它与label连用，做一个选择框

    <p>
        <input type="checkbox" id="cbox1" value="first_checkbox">
        <label for="cbox1">This is the first checkbox</label>
    </p>
    <p>
        <input type="checkbox" id="cbox2" value="second_checkbox" checked="checked">
        <label for="cbox2">This is the second checkbox, which is checked</label>
    </p>

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

<div>
  <input type="radio" id="huey" name="drone" value="huey"
         checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

此时只能选择一个！
其他的基本上用法跟上面表示的用法相似，不再一一举例，根据不同的需求，确定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

禁用此时的表单空间，比如我将<input type="password" id="password" name="password" disabled>,显示的效果如图：

maxlength

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

parttern

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

placeholder

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

事件

onchange:当表单元素发生改变并提交时 onfocus:当标签获取焦点的时候触发 onblur:当元素失去焦点的时候触发

验证器

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="i_like" required>
  <button>Submit</button>
</form>

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

其他输入标签

select+option
textarea
label

特别注意：
1.一般我们不监听input的click事件
2.form里面的input要有name
3.form里要放一个type=submit的元素才能触发提交事件

HTML整理 （form）