HTML 笔记（六）：表单标签

Reyn Morales

已于 2022-09-06 15:34:59 修改

阅读量129

点赞数 1

分类专栏： HTML 笔记文章标签： html 前端

于 2022-07-21 09:12:49 首次发布

本文链接：https://blog.csdn.net/Raymiles/article/details/125885139

版权

HTML 笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML 笔记（六）：表单标签

表单标签用于收集用户信息，表单元素是 HTML 中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能

在 HTML 中标签 / 标记 / 元素均指 HTML 中的标签

<form>
    ...
</form>

input

存在一个 type 属性，此属性有很多类型的取值，取值的不同就决定了 input 标签的功能和外观

<input type="..." value="...">

属性

type

text（文本框）

可以为标签设置 value 属性，从而指定默认值

password（密码框）

radio（单选框）

默认情况下单选框不会互斥，必须为单选框标签设置一个 name 属性，且 name 属性还必须设置相同的值

checkbox（多选框）

在单选框和多选框中，所有条目的 name 属性必须一致
为 input 标签添加一个 checked 属性，可以为单选框或多选框指定默认值
在 HTML 中，如果属性的取值和属性的名称相同，可以只写名称而不用指定取值，如 checked，但在 XHTML 中必须写上取值
在表单标签中，除了按钮标签以外的标签都可以通过 value 属性来设置需要提交至服务器的数据

button

以下内容均为 input 标签中，type 属性的值

button（按钮）

用于定义一个普通按钮

可以为标签设置 value 属性，从而指定标题

image

用于定义一个图片按钮

可以为标签设置 src 属性，从而指定图片

reset

用于定义一个重置按钮

此标签的作用是重置（清空）内容，具有默认标题（重置），可以通过 value 属性指定标题

submit

用于定义一个提交按钮

此标签的作用是将表单中指定了 name 属性的 input 标签中的数据提交至服务器，可以通过 form 标签的 action 属性指定服务器地址

hidden

用于定义一个隐藏域

隐式收集用户的一些数据，且不会显示在界面中

label

默认情况下文字与输入框是没有关系的，可以使用 label 标签使文字和输入框绑定

<form>
    <label for="pwd">Password:</label><input id="pwd" type="password" />
</form>

使用 label 标签标记文字
为输入框设置 id 属性
在 label 标签中设置 for 属性的取值为输入框中的 id

将文本与 input 标签置于同一个 label 标签下也可以实现绑定，但存在局限性

datalist

用于为输入框绑定待选项

<input type="text" list="reyn" />

<datalist id="reyn">
    <option>...</option>
    ...
    <option>...</option>
</datalist>

编写一个输入框（text）和一个 datalist
为 datalist 设置 id 属性
在输入框中设置 list 属性的取值为 datalist 的 id

HTML5

以下内容均为 input 标签中，type 属性的值

自动校验输入的内容是否符合邮箱格式

url

自动校验输入的内容是否符合 URL 格式

date

可以通过浏览器提供的日历选择时间

color

可以通过浏览器提供的取色板选择颜色

非 input 标签

select

用于定义下拉列表

<select>
    <optgroup label="...">
        <option>...</option>
        ...
        <option>...</option>
    </optgroup>
    ...
    <optgroup label="...">
        <option>...</option>
        ...
        <option>...</option>
    </optgroup>
</select>