HTML学习（4）-HTML表单

我的个人博客欢迎大家来逛逛：我的博客

HTML表单

<form> 标签用于收集用户的输入，用它来定义HTML表单

<input>是最基本和重要的表单元素，它具有不同的属性：

类型	描述
text	定义常规文本输入
radio	定义单选按钮输入
submit	定义提交按钮

---

文本输入：text

 <form>
     First name: <br/>
     <input type="text" name="First name">
     <br/>
     Last name: <br/>
     <input type="text" name="Last name">
     <br/>
</form>

示例如下：

First name:

Last name:

---

单选输入：radio

<h2>单选输入</h2>
<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br/>
    <input type="radio" name="sex" value="female">Female
</form>

示例如下：

单选输入

Male
Female

---

提交输入：submit

在<form>的时候规定其 action属性为 提交的处理程序，例如我这里设置了一个网址，则点击submit后将会跳转到这个 action的网址。

如果省略 action 属性，则 action 会被设置为当前页面。

<h2>表单提交</h2>
<form action="https://helloylh.com">
    <input type="text" name="account" value="账号">
    <br/>
    <input type="text" name="password" value="密码">
    <br/>
    <input type="submit" value="Submit">
</form>

示例如下：

表单提交

method属性为提交表单的时候使用的HTTP方法，可以为GET或者POST

使用GET的时候，表单数据在地址栏是可见的（GET 最适合少量数据的提交）。

使用POST的时候，页面地址栏中被提交的数据是不可见的（适合密码的输入等隐私信息）。

---

name属性：如果想要输入被正确提交，则必须指定name属性，submit只会提交具有name属性的input

---

组合表单数据

组合表单的数据：使用<fieldset>。

为这个表单命名：使用<legend>。

<form action="https://www.w3school.com.cn/demo/demo_form.asp" method="post">
    <fieldset style="width: 200px;">
        <legend>请输入信息</legend>
        Account: <br/>
        <input type="text" name="account">
        <br/>
        Password: <br/>
        <input type="text" name="password">
        <br/>
        <input type="submit" value="提交">
    </fieldset>
</form>

示例如下：

请输入信息

Account:

Password:

---

<form>的其他属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

---

HTML表单属性

action属性定义提交表单执行的行为

当用户提交的时候，表单数据会发送到其指向的文件上，该文件包含处理表单数据的服务器端脚本。

提示：如果省略 action 属性，则将 action 设置为当前页面。

target属性规定提交表单后在何处相应

method 属性规定提交表单会使用的HTTP方法：表单数据作为URL：get；作为HTTP post事务：post

Autocomplete 属性规定表单是否打开自动完成功能（会根据用户之前的输入自动填写值）。

novalidate属性规定不对表单输入的数据进行验证。

--

HTML表单元素

<select>元素是下拉元素，用于设置定义下拉列表。

<option>元素定义带选择的选项，使用selected来规定一个默认的选项

<select name="age">
    <option value="18">18</option>
    <option value="19" selected>19</option>
    <option value="20">20</option>
    <option value="21">21</option>
</select>

示例如下：

18 19 20 21

---

<textarea>规定了一个文本框，可以输入很多内容：

<h2>文本域</h2>
<p>续写故事: </p>
<textarea name="message" cols="30" rows="10">一条狗走在漆黑的小巷里……</textarea>
<br/>
<input type="submit" value="发表">

示例如下：

文本域

续写故事:

一条狗走在漆黑的小巷里…… ---

<button>规定表单的按钮：

<button type="button" onclick="alert('helloylh!')">点击我！</button>

示例如下：

点击我！

---

HTML5 增加了如下表单元素：

• <datalist>
• <keygen>
• <output>

---

HTML输入类型

<input type="text">定义文本输入的单行字段。

<input type="password">定义密码输入的单行字段，密码会以 **** 等形式显示。

<input type="submit">定义表单数据提交的处理程序。

<input type="radio">定义单选按钮。

<input type="checkbox">定义多选按钮。

<input type="button">定义输入按钮。

<input type="number">输入限制，只能输入数字，另外还可以规定输入的最小与最大值。

<form action="">
    请输入成绩:
    <input type="number" name="quantity" min="1" max="100">
    <input type="submit" name="Submit" id="">
</form>

其他的输入限制：

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

<input type="date">选择日期的输入。

<form>
    请输入日期:
    <input type="date">
</form>

示例如下：

请输入日期：

<input type="color">颜色选择器

<form>
    请选择颜色: <br/>
    <input type="color" name="Color">
</form>

请选择颜色:

<input type="color">输入滑块

<form>
    <p>选择范围:</p><br/>
    <input type="range">
</form>

选择范围:

---

其他输入类型和HTML5新增加的输入类型：

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

---

HTML输入属性

value 设置默认值

form action="">
	First name: <br/>
	<input type="text" name="First name" value="默认值">
</form>

readonly设置只读

<textarea name="TextArea" id="" cols="30" rows="10" readonly>我是只读的哦，你不能修改！
        </textarea>

我是只读的哦，你不能修改！

disable设置不可点击

<form action="">
    <p>不可点击这个子段:</p>
    <input type="text" value="我是不可点击的！" disabled>
</form>

不可点击这个子段:

size 设置子段的尺寸

maxlength 子段允许输入的最大长度

---

其他属性与HTML5新增：

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height 和 width
• list
• min 和 max
• multiple
• pattern (regexp)
• placeholder
• required
• step

---

HTML input form*属性

form属性：规定input元素所处的表单，此属性的值必须等于它所属的

元素的 id 属性。

<!-- input元素所处的表单 -->
<form action="https://helloylh.com" id="form1" method="get">
    <label for="Fname">First name: </label><input type="text" id="fname">
    <input type="submit" value="提交">
</form><br>
<p>下面的Last name仍然是表单的一部分: </p><br/>
<label for="Lname">Last name: </label><input type="text" form="form1" id="lname">

First name:

下面的Last name仍然是表单的一部分:

Last name:

---

formaction和action一样，也具有提交表单的功能，但是能覆盖action：

 <form action="https://helloylh.com">
     <label for="Fname">First name: </label><input type="text" name="First_name" id=""><br/>
     <label for="Lname">Last name: </label><input type="text" name="Last name" id=""><br/><br/>
     <input type="submit" name="Submit" value="提交">
     <input type="submit" name="super_Submit" formaction="https://github.com//luumod" value="root提交">
</form>

First name:
Last name:

---

formenctype 属性：指示提交时应当如何编码表单数据。仅适用于post属性时，将覆盖<form>元素的enctype属性。

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

<form action="/action_page.php" method="get">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">
</form>

姓氏：

名字：

---

formtarget属性：定义了提交的响应方式。

formnovalidate属性：提交时不进行验证<input>的数据。

novalidate属性：提交时所有表单数据都不验证，属于<form>标签。