【前端】【HTML笔记】之基础知识梳理（四）—— 表单

最新推荐文章于 2024-06-15 11:46:27 发布

Oct.S

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量152

点赞数 1

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

本文链接：https://blog.csdn.net/HY_Sophie/article/details/128673948

版权

笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

七、表单

7.1 表单设置

举例：

<form action="">
        用户名：<input type="text">
</form>

7.2 表单控件

① 文本输入框和密码输入框：

用户名：<input type="text">
密码：<input type="password" maxlength="6">

type设置为 text 时为文本输入框（默认），设置为 password 时为密码输入框

② 单选框和复选框：

<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<br>
课程：
<input type="checkbox" value="1" checked>语文
<input type="checkbox" value="2">数学
<input type="checkbox" value="3">英语

type设置为 radio 时为单选框，设置为 checkbox 时为复选框

注：多个单选框设置为单选时，需要设置相同的 name 值；checked 默认选中，可应用于单选框和复选框

③ 下拉选项框

城市：
        <select>   
            <option value="1" selected>北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
        </select>

注：下拉选项框中 selected 默认选中

④ 文本域

<textarea rows="10" cols="25"></textarea>

⑤ 提交按钮、重置按钮、普通按钮

<!-- 使用 button 标签实现提交按钮 -->
<button type="submit">提交</button>

<!-- 使用 button 标签实现重置按钮 -->
<button type="reset">重置</button>

<!-- 使用 button 标签实现普通按钮 -->
<button type="button">普通按钮</button>

注：button 标签的 type 属性值默认是 submit

7.3 表单控件的通用属性

① name 属性

name 属性规定 input 元素的名称，对提交到服务器后的表单数据进行标识或者在客户端通过 JavaScript 引用表单数据。

Ⅰ.同一单选项，有多个单选框，需要设置相同 name 值才具有单选功能；

Ⅱ.下拉选项框需要将 name 设置到 select 上。

HTML <input> 标签的 name 属性

② value 属性

value 是值。

Ⅰ. 对于文本输入框和密码输入框，value 可以设置默认输入的内容；
Ⅱ. 对于单选框和复选框，value 可以设置真正提交的数据；
Ⅲ. 对于 input 实现的提交按钮、重置按钮、普通按钮，value 可以设置按钮上的文字；
Ⅳ. 对于 option，value 可以设置真正提交的数据；但是如果没有设置 value 输入，会将 option 中间的文字作为提交的数据；
Ⅴ. button、textarea、select 没有 value 属性。

HTML input value 属性 | 菜鸟教程

③ disabled 属性

disabled 属性是一个布尔属性，规定应该禁用的 input 元素，被禁用的 input 元素是无法使用和无法点击的。

Ⅰ. disabled 属性可以将表单控件设置为不可用状态；

Ⅱ. disabled 属性不需要设置值。

注：disabled 属性不适用于 <input type="hidden">。

HTML input disabled 属性 | 菜鸟教程 HTML button disabled 属性 | 菜鸟教程

7.4 label 标签

label 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。但它为鼠标用户改进了可用性，如果在 label 元素内点击文本，就会触发此控件。

<label for="username-">用户名：</label>
<input type="text" id="username-">

性别：
<label>
    <input type="radio" name="gender"> 男
</label>
<label>
    <input type="radio" name="gender"> 女
</label>

① 单选框、复选框通常情况下使用 label 将表单控件与文字描述包裹；

② 文本输入框、密码输入框、下拉选项、文本域，通过设置 label 标签 for 属性的值与表单控件 id 属性的值一致；

③ 提交按钮、重置按钮、普通按钮不需要使用 label 。

HTML <label> 标签 | 菜鸟教程

7.5 表单标签总结

标签名	语义和功能	属性	单标签和双标签
form	表单包裹元素	action：设置提交地址。 target：提交地址的打开窗口。	双
input	各种类型的表单控件	type：设置表单控件的类型。 name：表单控件的标识。 value：表单控件的值。 maxlength：设置最大可输入长度。 checked：设置为默认选中。 disabled：设置表单控件不可用	单
button	各类类型的按钮	type：按钮的类型	双
textarea	文本域	rows：默认显示的行数（高度） cols：默认每行的字符个数（宽度） name：表单控件的标识。 disabled：设置表单控件不可用	双
select	下拉选项包裹元素	name：表单控件的标识。 disabled：设置表单控件不可用	双
option	下拉选项	value：该选项的值（真正要提交的数据） selected：设置默认选中。 disabled：设置表单控件不可用	双
label	用于关联表单控件	for：与所关联的表单控件的ID一致	双