六、表单标签

2021-02-01 本文已影响0人 honest涛

一、表单标签

1、为什么需要表单

使用表单目的时为了 $\color{red}{收集用户信息}$ 。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

2、表单的组成

在HTML中，一个完整的表单通常由 $\color{red}{表单域}$ 、 $\color{red}{表单空间（也称为表单元素）}$ 和 $\color{red}{提示信息}$ 3个部分构成。

表单的组成.png

3、表单域

$\color{red}{表单域}$ 是一个 $\color{red}{包含表单元素的区域}$ 。
在HTML标签中， $\color{red}{<form>}$ 标签用于定义表单域，以实现用户信息的收集和传递。
$\color{red}{<form>会把它范围内的表单元素信息提交给服务器。}$

   <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>

表单常用属性.png

4、表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

4.1、<input>表单元素

在英文单词中，input是输入的意思，而在表单元素中 $\color{red}{<input>标签用于收集用户信息}$ 。
在<input>标签中，包含一个 $\color{red}{type}$ 属性，根据不同的 $\color{red}{type}$ 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选控件、按钮等）。

<input type="属性值" />

<input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
$\color{red}{type}$ 属性的属性值及描述如下：
type属性的属性值.png
除type属性外，<input>标签还有其他很多属性，其常用属性如下：
input标签属性.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="" name="">
        <!-- 
            Q:页面中的表单元素很多,如何区别不同的表单元素?
            A:name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单.
            页面中的表单很多,name的主要作用就是用于区别不同的表单
         -->
        用户名:<input type="text" value="请输入用户名" name="username" />

        <br />
        <!-- 
            radio(或者checkbox)如果是一组,我们必须给它们命名相同的名字.
            checked属性:表示默认选中状态.用于单选按钮和复选按钮.
         -->
        性别:<input type="radio" name="gender" value="man" checked="checked"/> 男
        <input type="radio" name="gender" value="woman" /> 女
        
        <br />
        密码:<input type="password" name="pwd" id="password" />

        <br />
        爱好:
        <input type="checkbox" name="hobby" id="eat" value="吃饭" />吃饭
        <input type="checkbox" name="hobby" id="sleep" value="睡觉" />睡觉
        <input type="checkbox" name="hobby" id="game" value="打游戏" />打游戏

        <br />
        <input type="button" value="发生验证码" />

        <br />
        <input type="submit" value="免费注册" />

        <br />
        <input type="reset" value="重新填写" />

        <br />
        上传头像:<input type="file" />

    </form>
</body>
</html>

input例子.png

4.2、<label>标签

$\color{red}{<label>}$ 标签为input元素定义标注（ $\color{red}{标签}$ ）。
$\color{red}{<label>}$ 标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验；
语法：

    <label for="man">男</label>
    <input type="radio" name="gender" id="man">
    <label for="woman">女</label>
    <input type="radio" name="gender" id="woman">

核心：<label>标签的 $\color{red}{for属性}$ 应当与相关元素的 $\color{red}{id属性相同}$ 。

4.3、<select>表单元素

在页面中，如果由多个选项让用户选择，并且想要节约页面空间时，我们可以使用 $\color{red}{<select>}$ 标签控件定义 $\color{red}{下拉列表}$ 。
语法：

   <select name="" id="">
        <option value="">选项1</option>
        <option value="">选项2</option>
        <option value="">选项3</option>
    </select>

<select>中至少包含一对<option>。
在<option>中定义select="selected"时，当前项即为默认选中项。

4.4、<textarea>表单元素

语法:

    <textarea name="" id="" cols="30" rows="10">
        文本内容
    </textarea>

通过<textarea>标签可以轻松地创建多行文本输入框。
cols = "每行中的字符数"，rows = "显示的行数"， $\color{red}{我们在实际开发中不会使用，都是用CSS来改变大小}$ 。

5、查阅文档

经常查阅文档时一个非常好的学习习惯：

推荐网址：https://www.w3cschool.cn/
MDN:https://developer.mozilla.org/zh-CN/