[HTML]表单标签（form表单域input输入表单label标签select下拉表单textarea文本域）

Posted 2023-03-28 detail_new

本博文介绍HTML中的表单标签，包含form表单域、input输入表单、label标签、select下拉表单和textarea文本域。

本博文介绍HTML中的表单标签。

表单 = 表单域 + 表单控件 + 提示信息，下面说说表单域和表单控件。

1 表单域标签：<form></form>

        基本格式：

        <form action="url" method="提交方式" name="表单域名称">

                各种表单元素控件

        </form>

        参数说明：

参数	说明
action	用于指定接收并处理表单数据的服务器程序的URL
method	用于设置表单数据的提交方式，其取值为get或者post
name	指定表单的名称

2 表单控件（表单元素）

• input输入表单元素

        基本格式：<input type="表单类型" name="表单名称" value="表单的值">

        input的常用属性：

属性名	说明
type	决定输入类型，可选值及说明在下表
name	定义input元素的名称
id	标签的唯一标识
value	规定input元素的值
checked	规定此input元素首次加载时被选中，用法：checked="checked"
maxlength	规定表单中输入字符串的最大长度

        属性type的可选值：

可选值	说明
button	可点击按钮（结合js搭配使用）
file	定义输入字段和“浏览”按钮，供文件上传
checkbox	复选框（表单属性name需要相同）
password	密码字段，字段中字符被掩码
hidden	隐藏的输入字段
radio	单选按钮（表单属性name需要相同）
reset	重置按钮，清除表单数据
text	单行输入字段，默认宽度为20字符
submit	提交按钮，可将表单数据发送到服务器

• label标签

        用处：绑定一个表单元素，当点击label标签内文本时，浏览器自动将光标转到（或选择）对应的表单元素。注意label的for属性值要和input的id属性值一致。

        基本格式：<label for="input的id值">标签内文本</label>

        举例：

        <label for="字符串">男</label>

        <input type="radio" name = "sex" id="字符串">

        此时用户点击“男”，则会选中单选按钮。

• select下拉表单元素

        基本格式：

        <select>

                <option>选项1</option>

                <option>选项2</option>

        </select>

        注意：<option>中添加selected = "selected"，则表示默认选中。

• textarea文本域元素

        基本格式：

        <textarea rows="行数" cols="列数">

                文本内容

        </textarea>

        参数说明：

参数	说明
rows	文本域的行数
cols	文本域的列数