htmlinput（HTML表单及其Input输入类型）
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表单输入类型
输入类型
定义
text
定义供文本输入的单行输入字段
password
定义密码字段
submit
定义提交表单数据至表单处理程序的按钮
radio
定义单选按钮
checkbox
定义复选框
<input>中的type：
类型
定义
radio
定义单选按钮
checkbox
定义复选框
button
定义按钮
number
用于应该包含数字值的输入字段
date
用于应该包含日期的输入字段
color
用于应该包含颜色的输入字段
range
用于应该包含一定范围内的值的输入字段
month
允许用户选择月份和年份
week
允许用户选择周和年
time
允许用户选择时间（无时区）
datetime
允许用户选择日期和时间（有时区）
datetime-local
允许用户选择日期和时间（无时区）
用于应该包含电子邮件地址的输入字段
search
用于搜索字段（搜索字段的表现类似常规文本字段）
tel
用于应该包含电话号码的输入字段
url
用于应该包含 URL 地址的输入字段
输入限制：
这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。
- 发表于 2022-10-30 14:16:32
- 阅读 ( 168 )
- 分类：科技
619 篇文章