HTML5 表单元素

最新推荐文章于 2021-11-12 21:53:12 发布

苦涩2020

最新推荐文章于 2021-11-12 21:53:12 发布

阅读量382

点赞数 1

分类专栏： HTML5 前端文章标签： html5

本文链接：https://blog.csdn.net/UserPython/article/details/104171925

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

HTML5

10 篇文章

订阅专栏

本文详细介绍了HTML5中的表单元素，包括form、input、select、datalist、label、textarea、button、output、progress和meter等标签的属性及用途。讲解了get和post提交的区别，以及各种输入类型的验证和交互特性。

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

form 标签

用来定义一个表单，是建立表单的基础标签
表单的其他元素包含在form标签中，其主要子标签有：input、button、select…

form的属性

action：指定表单的发送地址（服务器地址）
method：表单数据发送至服务器的方法，常用的有两种：get/post

get和post提交的区别

get方法提交：数据会附加在网址之后主动提交给服务器
post方法提交：数据不会附加在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="https://www.baidu.com" method="POST" target="_blank">
        用户名：<input type="text" name="user">
        密码：<input type="password" name="password">
        <input type="submit">
    </form>
</body>
</html>

input 标签

用来设置表单中的内容项，比如输入内容的文本框，按钮等
不仅可以布置在表单中，也可以在表单外的标签使用

input的属性

type：指定输入内容的类型，默认为text：单行文本框
name：输入内容的识别名称，传递参数时候的参数名称
value：设置默认值
maxlength：设置输入最多的字数
readonly：只读属性，设置内容不可变更，提交时会发送至服务器
disabled：设置为不可用（不可操作）
required：设置该内容为必须填写项，否则无法提交
placeholder：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email/password/search有效
autocomplete：属性值为on/off，定义是否开启浏览器自动记忆功能，默认打开
autofocus：自动获得焦点，即光标定位在文本框内
accesskey：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”，便会获得焦点
tabindex：指定按tab键时，项目间的移动顺序

type的属性值

text：默认值，文本输入框
password：输入密码状态
submit：提交按钮，点击将数据发送至服务器
reset：重置按钮
button：普通按钮
imge：图片式提交按钮
hidden：隐藏字段；该内容不会显示在页面上，一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    <form action="" method="GET">
        <input type="hidden" name="统计" value="233">
        用户名：<input type="text" name="user" value="请输入用户名"> <br>
        密码：<input type="password" name="password" maxlength="6"> <br>
        国家：<input type="text" readonly="readonly" name="gj" value="中国"> <br>
        地址：<input type="text"> <br>
        示例：<input type="text" disabled="disabled" name="tiShi" value="xx省xx市xx区"> <br>
        <input type="submit" value="确定">
        <input type="reset">
        <input type="button" value="按钮">
    </form>
    <div>
        <input type="image" src="imgs/ss.png">
    </div>
</body>
</html>

email：表示要输入的内容是电子邮箱；会对输入内容进行验证是否填写正确email格式
url：表示要输入的内容是网址；对输入内容进行验证是否为url格式
tel：表示输入的内容是电话号码；但是不会对输入的内容进行验证
number：表示要输入的内容是数值；可以配合input的max/min/step/value规定允许输入的最大值、最小值、步长、默认值
range：表示要输入的内容是一定范围的数值，但是以一个活动条的状态显示；可以配合input的max/min/step/value规定允许输入的最大值、最小值、步长、默认值

    <form action="">
        数量：<input type="number" name="number" max="50" min="0" step="2" value="20">
        <input type="submit">
        <br>
        音量：<input type="range" name="range" max="100" min="0" step="2" value="80">
        <input type="submit">
    </form>

时间属性：包括datetime/datetime-local/date/month/week/time

    <form action="">
        时间：<input type="time" name="time"> <br>
        日期：<input type="date"> <br>
        月份：<input type="month"> <br>
        周：<input type="week"> <br>
        本地时间：<input type="datetime-local"> <br>
        UTC时间：<input type="datetime"> <br>
        <hr>
        颜色：<input type="color" name="color">
        <input type="submit">
    </form>

color：可以建立一个颜色的选择输入框
seacrch：用于建立一个搜索框，用来供用户输入搜索的关键词
file：用来创建一个文件选取的输入框；可通过accept属性规定选取文件的类型，比如图片、视频等；其中multipe属性可以设定一次允许选择多个文件

<form action="">
        <input type="search" name="search" placeholder="请输入关键词" autocomplete="on" autofocus>
        <input type="submit" value="搜索">

        <br><br><br>

        选择文件：<input type="file" name="file" accept="image/jpeg" multiple="multiple">
    </form>

radio：用来创建一个单选框；通过checked属性可将某个选项设为默认的选取状态；必须将同一组单选项设置一个相同的name属性值

    <form accept="">
        <h3>你是男士还是女士</h3>
        <input type="radio" name="danXuan" value="A" checked="checkbox">男士
        <input type="radio" name="danXuan" value="B">女士
    </form>

checkbox：用来创建一个复选框；通过checked属性可将某个选项设为默认的选取状态，再次单击取消选取

    <form accept="">
        <h3>编程语言</h3>
        <input type="checkbox" name="duoXuan" value="A" checked="checkbox">JS
        <input type="checkbox" name="duoXuan" value="B">HTML
        <input type="checkbox" name="duoXuan" value="C">CSS
        <input type="checkbox" name="duoXuan" value="D">python
    </form>

select 标签

用来建立一个下拉菜单选项列表
不仅可以在表单中使用，还可以在其他块标签和内联元素中使用
select只是定义一个下拉菜单列表，其具体列表项要通过option标签建立，当提交时，提交的是option内的value属性值

option标签

option标签可以用来建立一个选项，即下拉列表的一个菜单项
optgroup标签用来对option标签进行组合分组
sizes用来定义列表中显示的列表项
multiple属性用来定义是否可以多选
可以添加disbled属性和autofocus属性
设置selected属性则为默认选中状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select&datalist标签</title>
</head>
<body>
    <h3>你掌握的编程语言</h3>
    <form action="">
        <select name="xuanZe" size="2" multiple="multiple">
            <optgroup>
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="JS">JS</option>
                <option value="JAVA">JAVA</option>
                <option value="python">python</option>
            </optgroup>           
        </select>
        <input type="submit">
    </form>
</body>
</html>

datalist 标签

用来建立一个选项列表
datalist标签的内容不会直接显示在网页上，只是会在输入时作为候选项
通常与input标签配合使用

    <h3>查找你要的课程</h3>
    <form action="">
        <input type="text" name="ss" list="mydatalist">
        <datalist id="mydatalist">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="JS">JS</option>
            <option value="JAVA">JAVA</option>
            <option value="python">python</option>
        </datalist>
        <input type="submit">
    </form>

lable 标签

用来为input标签定义标注（标记），建立一个与之相关联的标签

lable的属性

for ：让标签与指定的input标签建立关联
将input标签包含在label标签中
可以通过accesskey建立快捷键
在option标签中，可以设定比标签内容更优先的选项
optgroup的分组名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label标签</title>
</head>
<body>
    <table border="1" align="center">
        <td>
            <form action="">
                <h3>计算机课程</h3>
                <input type="checkbox" name="dx" value="CAD" id="A">
                <label for="A">CAD</label>
                <input type="checkbox" name="dx" value="多媒体设计" id="B">
                <label for="B">多媒体设计</label>
                <input type="checkbox" name="dx" value="Python" id="C">
                <label for="C">Python</label>
                <input type="checkbox" name="dx" value="Java" id="D">
                <label for="D">Java</label>
                <hr>
                <h3>你是男士还是女士</h3>
                <input type="radio" name="danXuan" value="A" id="E">
                <label for="E">男士</label>
                <input type="radio" name="danXuan" value="B" id="F">
                <label for="F">女士</label>
                <input type="radio" name="danXuan" value="C" id="G">
                <label for="G">保密</label>
            </form>
        </td>
        <td>
            <form action="">
                <h3>计算机课程</h3>
                <label><input type="checkbox" name="dx" value="CAD">CAD</label>
                <label><input type="checkbox" name="dx" value="多媒体设计">多媒体设计</label>
                <label><input type="checkbox" name="dx" value="Python">Python</label>
                <label><input type="checkbox" name="dx" value="Java">Java</label>
                <hr>
                <h3>你是男士还是女士</h3>
                <label><input type="radio" name="danXuan" value="A">男士</label>
                <label><input type="radio" name="danXuan" value="B">女士</label>
                <label><input type="radio" name="danXuan" value="C">保密</label>
            </form>
        </td>
    </table>

    <br>
    <hr>
    <form action="">
        <h3>选择课程</h3>
        <input type="submit" value="搜索">
        <select name="keCheng">
            <optgroup label="网页设计">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="JS">JSL</option>
            </optgroup>
            <optgroup label="计算机语言">
                <option value="java" label="高级">java</option>
                <option value="python">python</option>
                <option value="c">c</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

textarea 标签

用来建立多行输入文本框
标签中的内容将以文本框默认值的形式呈现
不仅可以用在表单中，也可以在其他块元素或内联元素中

textarea的属性

name、disabled、readonly、form、reauired、autofocus、placeholder属性，与之前的一样
rows：设置多行文本的行数（高度）
cols：设置多行文本的每行显示的字数（宽度）

    <form action="">
        反馈：<textarea rows="5" cols="30">
        产品一般般，不是很好用
        </textarea>
        <input type="submit">
    </form>

button 标签

用来建立一个按钮从功能上来说，与input标签建立的按钮相同
button标签是双标签，其内部可以配置图片与文字，进行更复杂的样式设计
不仅可以在表单中使用，还可以在其他块标签和内联标签中使用

button的属性

type：可以设置三个值submit、reset、button与input标签设置的按钮含义相同
name、value、disable：属性与input标签的用法相同
autofocus：设置按钮自动获得焦点
form：设定按钮隶属于哪一个或多个表单
formmethod：设定表单的提交方式，将覆盖原本的提交方式
formnovalidate：设定表单将会覆盖原本的novalidate属性
formaction：指定表单数据发送对象，将覆盖原来的action属性设定
formenctype：指定表单的数据发送类型，将覆盖原本的enctype属性设定
formtarget：将覆盖原本的target属性设定

    <form action="">
        <button type="submit" value="提交到新的网址" formaction="_05_textarea.html">提交</button>
    </form>

output 标签

用来设置不同数据的输出
输出的内容由代码控制的

output的属性

name：定义对象的唯一名称（表单提交时使用）
form：定义所属的一个或多个表单
for：定义输出域相关的一个或多个标签

    <form action="" oninput="sum.value=parseInt(num1.value) + parseInt(num2.value)">
        <input type="number" id="num1"> + 
        <input type="number" id="num2"> =
        <output name="sum" for="num1,num2"></output>
    </form>

progress 标签

用来建立一个进度条
通常与JavaScript一同使用，用于显示任务的进度

progress的属性

max：设定当前进度的最大值
value：设定进度条当前默认显示值
form：设定进度条所属的一个或多个表单

    <form action="">
        <progress value="20" max="100"></progress>
    </form>

meter 标签

用来建立一个度量条，用来表示度量衡的评定
通常与JavaScript一同使用，用来显示任务的进度

meter的属性

value：设定进度条当前默认显示值
max：设定范围的最大值，默认值为1
min：设定范围的最小值，默认值为0
low：设定被视作低的标准
high：设定被视作高的标准
optimum：设定度量条的最佳标准值
form：设定所属的一个或多个表单

    <form action="">
        <meter max="100" min="0" value="10" high="80" low="30"></meter> <br>
        <meter max="100" min="0" value="50" high="80" low="30"></meter> <br>
        <meter max="100" min="0" value="90" high="80" low="30"></meter> <br>
        <meter max="100" min="0" value="60" high="80" low="30" optimum="60"></meter>
    </form>

fieldset和legend 标签

fieldset标签可将表单内的相关标签分组
当一组表单标签放到fieldset标签内时，浏览器会以特殊方式来显示它们，通常会有一个边框
没有必需的或唯一的属性，form、disabled属性可用
legend标签：为fieldset标签定义标题

    <form action="">
        <fieldset>
        	<legend>用户注册</legend>
            用户名：<input type="text"> <br>
            密  码：<input type="password"> <br>
            <input type="submit"> <br>
        </fieldset>
    </form>

details和summary 标签

用于描述文档或文档某个部分的细节
通常与summary标签配合使用，可以为details定义标题。
标题是可见的，用户点击标题时，会显示出details中的内容

details的属性

open属性：设定在页面中的details是可见的

    <details open="open">
        <summary>点击查看</summary>
        <p>详细内容。。。。。。</p>
    </details>