HTML表单及其Input输入类型
作者：游老师 浏览次数： 2021-06-07 17:07
HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。
一、HTML表单
1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。
2、表单使用标签<form>来设置，示例：
运行结果：
二、HTML表单属性：
1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。
2、action属性
在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。
如果省略 action 属性，则 action 会被设置为当前页面。
3、method 属性
method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get。
如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。
4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
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>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>
</body>
</html>
运行结果：
5、target 属性
target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：
默认值为 _self，这意味着响应将在当前窗口中打开。
6、Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：
运行结果：
7、所有<form>属性的列表：
三、HTML表单元素：
1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：
① 文本输入（text），示例：
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>请注意表单本身是不可见的。</p>
<p>同时请注意文本字段的默认宽度是 20 个字符。</p>
</body>
</html>
运行结果：
② 单选按钮输入（radio），示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
</html>
运行结果：
③ 提交按钮（submit），示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
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>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
运行结果：
2、<select>元素
<select>元素定义下拉列表，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
运行结果：
3、<fieldset>元素
<fieldset>元素组合表单中的相关数据
<legend>元素为<fieldset>元素定义标题，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
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">
</fieldset>
</form>
</body>
</html>
运行结果：
4、<textarea> 元素
<textarea> 元素定义多行输入字段（文本域）、示例：
<!DOCTYPE html>
<html>
<body>
<form>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
</body>
</html>
运行结果：
5、HTML5<datalist>元素
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
运行结果：
四、HTML表单输入类型
<input>中的type：
输入限制：
这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。
一、HTML表单
1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。
2、表单使用标签<form>来设置，示例：
1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。
2、action属性
在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。
如果省略 action 属性，则 action 会被设置为当前页面。
3、method 属性
method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。
4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
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>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>
</body>
</html>
运行结果：
target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：
6、Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：
1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>请注意表单本身是不可见的。</p>
<p>同时请注意文本字段的默认宽度是 20 个字符。</p>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
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>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
运行结果：
<select>元素定义下拉列表，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
运行结果：
<fieldset>元素组合表单中的相关数据
<legend>元素为<fieldset>元素定义标题，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
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">
</fieldset>
</form>
</body>
</html>
运行结果：
<textarea> 元素定义多行输入字段（文本域）、示例：
<!DOCTYPE html>
<html>
<body>
<form>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
</body>
</html>
运行结果：
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
运行结果：
| 输入类型 | 定义 |
| text | 定义供文本输入的单行输入字段 |
| password | 定义密码字段 |
| submit | 定义提交表单数据至表单处理程序的按钮 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| 类型 | 定义 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| button | 定义按钮 |
| number | 用于应该包含数字值的输入字段 |
| date | 用于应该包含日期的输入字段 |
| color | 用于应该包含颜色的输入字段 |
| range | 用于应该包含一定范围内的值的输入字段 |
| month | 允许用户选择月份和年份 |
| week | 允许用户选择周和年 |
| time | 允许用户选择时间（无时区） |
| datetime | 允许用户选择日期和时间（有时区） |
| datetime-local | 允许用户选择日期和时间（无时区） |
| 用于应该包含电子邮件地址的输入字段 | |
| search | 用于搜索字段（搜索字段的表现类似常规文本字段） |
| tel | 用于应该包含电话号码的输入字段 |
| url | 用于应该包含 URL 地址的输入字段 |
输入限制：
- 上一篇：要不要转行大数据？零基础转行能找到工作吗
- 下一篇：大数据编程入门：HTML元素总汇
