html——表单元素

最新推荐文章于 2024-03-26 22:19:00 发布

chhhhh0403

最新推荐文章于 2024-03-26 22:19:00 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端 html5基本元素文章标签： html5 html

本文链接：https://blog.csdn.net/chhhhh0403/article/details/124344694

web前端同时被 2 个专栏收录

2 篇文章

订阅专栏

html5基本元素

2 篇文章

订阅专栏

本文详细介绍了HTML5中的表单元素，包括form定义、input元素的各种用法，如聚焦、禁止自动完成、<fieldset>和<legend>的使用，以及type属性的各种类型，如文本框、按钮、复选框、单选框等，还涵盖了相关属性的设置和用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下文章主要探讨 HTML5 中表单元素，表单元素用于获取用户的输入数据，以及HTML5 中表单中 input 元素的 type 属性，根据不同的值来显示不同的输入框。

一．表单元素总汇

1.基础表单元素

在 HTML5 的表单中，提供了各种可供用户输入的表单控件。

元素名称	说明
form	表示 HTML 表单
input	表示用来收集用户输入数据的控件
textarea	表示可以输入多行文本的控件
select	表示用来提供一组固定的选项
option	表示提供提供一个选项
optgroup	表示一组相关的 option 元素
button	表示可用来提交或重置的表单按钮（或一般按钮）
datalist	定义一组提供给用户的建议值
fieldset	表示一组表单元素
legend	表示 fieldset 元素的说明性标签
label	表示表单元素的说明标签
output	表示计算结果

二．表单元素解析

1.form定义表单

<form method="post" action="http://www.haosou.com/" name=""> 
     <button>提交</button> 
</form>

method ———— 表示表单的请求方式：有 POST 和 GET 两种，默认 GET

action ———— 表示表单提交的页面

name ———— 设置表单名称，以便程序调用

2. input 元素解析

<input>表示用户输入数据 <input>元素默认情况会出现一个单行文本框.

(1).让光标聚焦在某个 input 元素上，让用户直接输入

例：

<input name="user" autofocus>

(2).禁用 input

例：

<input name="user" disabled>

(3).禁止自动完成

例：

<input name="user" autocomplete="off">

(4).表单外的 input

例：

<form method="get" id="register">
</form> 
<input name="email" form="register">

3.<fieldset>元素和<legend>添加分组说明标签

<fieldset>元素可以将一些表单元素组织在一起，形成一个整体，<legend>可添加分组说明标签。

例：

<fieldset> 
     <legend>登陆表单</legend> 
</fieldset>

<legend>元素可以给分组加上一个标题。

4．type 属性介绍——框元素及按钮元素

(1).文本框各类型

password ———— 隐藏字符的密码框

search ———— 搜索框，在某些浏览器键入内容会出现叉标记取消

submit、reset、button ———— 生成一个提交按钮、重置按钮、普通按钮

number、range ———— 只能输入数值的框；只能输入在一个数值范围的框

checkbox、radio ———— 复选框，用户勾选框；单选框，只能在几个中选一个

image、color ———— 生成一个图片按钮，颜色代码按钮

email、tel、url ———— 生成一个检测电子邮件、号码、网址的文本框

date、month、time、 week、datetime ———— 获取日期和时间

(2).可输入任意字符的文本框

当 type 值为 text 时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。

例：

<input type="text">

maxlength —— 表示可输入最大字符长度

readonly —— 只能读取不能输入

required —— 非空验证，提示输入文字

例：

<input type="text"  name=""  id="" value=""  maxlength="4"  size="100" required  />

(3).输入密码框

例：

<input   type="password"   name=""   id=""   value="" />

额外属性：

属性名称	说明
maxlength	设置密码框最大字符长度
pattern	用于输入验证的正则表达式
placeholder	输入密码字符的提示
readonly	密码框处于只读状态
disabled	密码框处于禁用状态
size	设置密码框宽度
value	设置密码框初始值
required	表明用户必须输入一个值，否则无法通过输入验证

(4).搜索框

搜索框 ——search

在某些浏览器键入内容右侧会出现叉标记取消，点击标记可清除输入文字。

例：

<input type="search" />

(5).数值范围文本框，仅可拖动

只限输入数字的文本框

例：

<input type="number">

设置框内调节数值按钮

例：

<input type="range">

设置框右侧拖动条

额外属性：

属性名称	说明
list	指定为文本框提供建议值的 datalist 元素，其值为 datalist 元素的 id 值
min	设置可接受的最小值
max	设定可接受的最大值
readonly	设置文本框内容只读
required	表明用户必须输入一个值，否则无法通过输入验证
step	指定上下调节值的步长
value	指定初始值

(6).单选框

只可进行单选

例：

<input type="radio" name="sex" value="男">男 
<input type="radio" name="sex" value="女">女

(7).多选框

可进行多选

例：

足球<input type="checkbox"> 
篮球<input type="checkbox">
排球<input type="checkbox">

额外属性：

属性名称	说明
checked	设置复选框、单选框是否为勾选状态
required	表示用户必须勾选，否则无法通过验证
value	设置复选框、单选框勾选状态时提交的数据。默认为 on

(8). 单选、多选框语义化

增加用户体验，for与id相关联，可以增加表单体验 ,表示点击文字即可选择。

例：

<label for="aa">足球</label>
   <input type="checkbox" name="" id="aa" value="" />
<label for="bb">篮球</label>	
   <input type="checkbox" name="" id="bb" value="" />
<label for="cc">排球</label>
   <input type="checkbox" name="" id="cc" value="" />

(9). 设置多行文本框

生成一个可变更大小的多行文本框。

例：

<textarea name="content" style="overflow-y: scroll;resize: none;" rows="5">
请留下您的建议！ 
</textarea>

resize: none ——— 清除右下角默认样式 overflow-y: scroll ———— 增加右边栏按钮

额外属性：

属性名称	说明
form	将表单外的多行文本框与某个表单挂钩
readonly	设置多行文本框只读
disabled	将多行文本框禁用
maxlength	设置最大可输入的字符长度
autofocus	获取焦点
placeholder	设置输入时的提示信息
rows	设置行数
cols	设置列数
wrap	设置是否插入换行符，有 soft 和 hard 两种
required	设置必须输入值，否则无法通过验证

(10).按钮框

type 为 submit、reset 和 button生成一个按钮，三种模式：提交、重置和一般按钮，和元素相同

例：提交按钮

<input type="submit">

重置按钮

<input type="reset">

一般按钮

<input type="button" value="一般按钮">

右边栏可选择值按钮

<input type="number" step="2" min="10" max="100">

属性：

属性名称	说明
min	设置可接受的最小值
max	设定可接受的最大值
readonly	设置文本框内容只读
required	表明用户必须输入一个值，否则无法通过输入验证
step	指定上下调节值的步长
value	指定默认初始值