这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天，看了html表单的相关内容，用笔记记录一下

html表单

html表单用于搜集不同类型的用户输入

文本输入

< input type="test" >定义用于文本输入的单行输入字段

单选按钮输入

单选按钮允许用户在有限数量的选项中选择其中之一,例如：

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

提交按钮

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

action属性

定义提交表单时要执行的操作

如：

<form action="/action_page.php">

提交后，将表单数据发送到 "action_page.php"：

target属性

该属性规定提交表单后在何处显示响应。

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。

提交表单数据时，默认的 HTTP 方法是 GET。

Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

实例

启用自动填写的表单：

<form action="/action_page.php" autocomplete="on">

其实就是输入框会有之前输入过的内容

select元素

select元素定义下拉列表：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

通过添加 selected 属性来定义预定义选项，如：

<option value="fiat" selected>Fiat</option>

textarea元素

该元素定义多行输入字段

button元素

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

加入的alert可以弹出页面显示框

datalist元素

元素为 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

元素的 list 属性必须引用 元素的 id 属性。

输入类型

text

文本输入的单行输入字段

password

定义密码字段

submit

定义提交表单数据至表单处理程序的按钮

radio

定义单选按钮

checkbox

定义复选框

复选框允许用户在有限数量的选项中选择零个或多个选项。

button

定义按钮

HTML5 增加了多个新的输入类型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

numbre

用于应该包含数字值的输入字段

  <input type="number" name="quantity" min="1" max="5">

date

用于应该包含日期的输入字段

color

包含颜色鞥带输入字段，浏览器支持的话，颜色选择器会出现在输入字段中

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

range

用于应该包含一定范围内的值的输入字段

根据浏览器支持，输入字段能够显示为滑块控件

<form>
  <input type="range" name="points" min="0" max="10">
</form>

这个就很像那些做问卷需要填写满意程度的

以下很多都是浏览器支持的话会有选择器的

• month 用户选择月份和年份
• week 选择周和年
• time
• datatime
• datetime-local
• email
• search
• tel
• url

input属性

• value

  规定输入字段的初始值

  <form action="">
   First name:<br>
  <input type="text" name="firstname" value="Bill">
  <br>
   Last name:<br>
  <input type="text" name="lastname">
  </form> 
  

• readonly

  规定输入字段为只读

• disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

• size

  规定输入字段的尺寸（以字符计）

• maxlength属性

  规定输入字段允许的最大长度 这个就限制了输入框里面能进多少字符

  该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

• autocomplete 属性

  autocomplete 属性规定表单或输入字段是否应该自动完成。

  当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

• novalidate 属性

novalidate 属性属于

属性。

如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

• autofocus

  自动焦点

• form 规定input属性所属表单

• fromaction 就是提交到哪里

  规定提交表单时对输入进行处理的文件的URL。例如

    <input type="submit" value="提交">
    <input type="submit" formaction="/demo/html/action_page_2.php" value="以管理员提交">
  

• formmethod

input 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法。

注释： 此属性将覆盖 <form> 元素的 method 属性。

formmethod 属性适用于以下输入类型：submit 和 image。

表单数据可以作为 URL 变量（method="get"）或作为 HTTP post 事务（method="post"）发送。

关于 GET 的注意事项：

• 以名称/值对的形式将表单数据追加到 URL
• 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
• URL 的长度受到限制（2048 个字符）
• 对于用户希望将结果添加为书签的表单提交很有用
• GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

• 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
• POST 没有大小限制，可用于发送大量数据。
• 带有 POST 的表单提交无法添加书签

提示： 如果表单数据包含敏感信息或个人信息，请务必使用 POST！

  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">

• formtarget

  nput 的 formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应

  注释： 此属性将覆盖 <form> 元素的 target 属性。

  formtarget 属性适用于以下输入类型：submit 和 image。

• formnovalidate

  比如定义了一个输入应该是email格式的，那看提交的时候验不验证

  <form action="/action_page.php">
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="提交">
    <input type="submit" formnovalidate="formnovalidate"
    value="不进行验证的提交">
  </form>
  

• novalidate

  <form action="/action_page.php" novalidate>
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="提交">
  </form>