HTML5常用表单元素

       今天在复习HTML元素的时候，有所感悟，回想起以前自己刚学HTML的时候好多元素和属性都记不住，但是到后面发现HTML5标准的元素有很多，但实际开发中常用的元素只用到很少一部分，因为现在都使用框架和组件库进行开发，用的最多的可能就是表单元素了，这里简单介绍一下HTML5的一些常用表单元素。

本人只是一名普通在校生，只是分享一下个人见解，我知道都是一些很基础的东西，但是希望对小白有所帮助，也希望路过的前辈指正错误。

<form>

首先表单是由 <form> 标签包含的一个用户输入信息的交互区域，在该元素内部包含各种输入控件。这里简单介绍一下常用的属性。

<form
  action="http://www.djycoder.com/test.html"
  method="get"
  enctype="application/x-www-form-urlencoded"
  target="_blank"
></form>

action 规定表单采集的数据提交到服务器处理程序的URL，也就是表单的数据要发送到什么地方。

如果没有指定属性值，会默认提交到当前页面，就像这样：

method 规定提交表单数据的方式，有get和post两种，默认是get方式。

enctype 规定提交表单数据前如何对其编码，有application/x-www-form-urlencoded，multipart/form-data，text/plain三种，默认是application/x-www-form-urlencoded。这里注意，当表单中有上传文件时，需要设置属性值为multipart/form-data。

target 规定在何处打开提交表单数据后得到的响应，默认在当前页打开。

早期这三个属性用于提交表单数据到服务器，不过现在基本上都是通过 JavaScript 来与后台进行数据的交互，因此实际开发中用的很少。

<form autocomplete="off">
</form>

autocomplete 规定表单是否启用自动填充功能，有on和off两种，默认是开启的。浏览器会根据之前输入过的值自动填充。

<form novalidate>
</form>

novalidate 是一个布尔属性，规定提交表单数据时不对输入内容进行验证。

<input>

最常用的表单元素应该就是 <input> 标签 ，通过属性 type 可以创建不同的输入控件，通过属性 name 为当前表单元素命名。

<form>
  <label for="name">姓名：</label><input type="text" name="name" id="name" />
  <input type="submit">
</form>

定义一个普通的输入框，这里为了用户体验，使用 <label> 标签把文本和输入框绑定，这样有个好处就是点击文本和点击文本框一样都能获得焦点。

<form>
  <label>密码：<input type="password" name="password"></label>
  <input type="submit">
</form>

定义一个密码框，输入的字符会显示为***进行隐藏，起到保护隐私的作用。同样为了用户体验，使用 <label> 标签把文本和密码框绑定，这里是另一种绑定方式。

<form>
  <input type="text" name="name">
  <input type="button">
</form>

定义一个普通按钮，点击没有任何变化，通常普通按钮是需要通过 JavaScript 添加功能的。

<form>
  <label>学号：<input type="number" name="num"></label>
  <input type="submit">
</form>

定义一个数字框，只能输入数字，无法输入其他字符。

<form>
  兴趣：<label><input type="radio" value="eat" name="hobby" />吃饭</label>
  <label><input type="radio" value="sleep" name="hobby" />睡觉</label>
  <label><input type="radio" value="study" name="hobby" />学习</label>
  <input type="submit">
</form>

定义一组单选框，一组单选框的 name 应该为同一个值，确保只能有一个被选中。

<form>
  兴趣：<label><input type="checkbox" value="eat" name="hobby1" />吃饭</label>
  <label><input type="checkbox" value="sleep" name="hobby2" />睡觉</label>
  <label><input type="checkbox" value="study" name="hobby3" />学习</label>
  <input type="submit">
</form>

定义一组复选框，一组复选框的 name 可以为不同值，可以任意选择一项或多项。

<form>
  <input type="file">
  <input type="submit">
</form>

定义一个上传文件框，点击可上传本地文件。

<form>
  <input type="text" name="name">
  <input type="password" name="password">
  <input type="reset">
</form>

定义一个重置按钮，点击可重置表单数据，恢复默认值。

<form
  action="http://www.djycoder.com/test.html"
  method="get"
  enctype="application/x-www-form-urlencoded"
  target="_blank"
>
  <input type="text" name="name">
  <input type="password" name="password">
  <input type="submit">
</form>

定义一个提交按钮，点击提交，表单会根据 <form> 标签提供的信息发送数据。

除了 type 属性，还有很多其他用于补充规则的属性。

<form>
  <input type="text" name="name" autocomplete="off">
</form>

autocomplete 属性规定输入框是否启用自动填充功能，这个属性既可以用在 <form> 标签上，也可以单独用于输入控件。

<form>
  <input type="text" name="name" autofocus>
</form>

 autofocus 属性规定页面加载后输入框自动获取焦点。

<form>
  兴趣：<label><input type="radio" value="eat" name="hobby" />吃饭</label>
  <label><input type="radio" value="sleep" name="hobby" checked />睡觉</label>
  <label><input type="radio" value="study" name="hobby" />学习</label>
  <input type="submit">
</form>

checked 属性规定页面加载后预先选定的单选框或多选框，指定默认选项。

<form>
  <input type="text" name="name" disabled>
</form>

disabled 属性规定禁用的输入框，禁用的表单控件无法点击，也不会被提交。

<form>
  <input type="number" name="num" min="2" max="5">
</form>

max 属性规定输入字段的最大值，min 属性规定输入字段的最小值，可用于限制日期或数字。

<form>
  <input type="text" name="name" maxlength="4">
</form>

maxlength 属性规定允许输入的最大字符数，可用于限制输入内容的长度。

<form>
  <input type="number" name="num" pattern="^[0-9]*$">
</form>

pattern 属性规定输入框的校验规则，传入一个正则表达式用于校验。

<form>
  <input type="text" name="name" placeholder="请输入姓名">
</form>

placeholder 属性规定输入框的提示文字，提升用户体验。

<form>
  <input type="text" name="name" readonly>
</form>

readonly 属性规定输入框是只读的，可以点击，选中，但不能修改，只读的值会被提交。

<form>
  <input type="text" name="name" required>
</form>

required 属性规定输入框是必填的，没有填写则无法提交。

<form>
  <input type="text" name="name" value="默认值">
</form>

value 属性规定输入框的默认值，可删除重新填写。

欲穷其言，光阴不待，余生有悟，幸甚可载。