web前端学习42-54（HTML表单标签---表单，表单域，表单控件）

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121236998

文章目录

3. 表单标签

3. 表单标签

现实中的表单，例如我们去银行办理信用卡填写的单子。

网页中的表单展示

在这里插入图片描述

3.1 为什么需要表单

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

3.2 表单的组成

在HTML中，一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3个部分构成

红色表单域

蓝色（每一个小方块，小按钮）表单元素

绿色（比如身高学历，有提示）提示信息

在这里插入图片描述

3.3 表单域（了解）

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

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

09-表单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="demo.php" method="POST" name="name1">

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

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称。以区分同一个页面中的多个表单域。

暂时不用表单域提交数据,只需要写上form标签即可.等学习服务器编程阶段会进行提交数据等操作.

目前学习基础，后面再学习 —学习服务器编程

这里只需要记住两点:

在我们写表单元素之前,应该有个表单域把他们进行包含.
表单域是form标签.

3.4 表单控件（表单元素）

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

input输入表单元素
select下拉表单元素
textarea文本域元素

3.4.1 < input>表单元素

input：输入。在表单元素中**< input>标签用于收集用户信息**。
在< input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type = "属性值" />

< input/> 单标签
type属性设置不同的属性值用来指定不同的控件类型

type属性的书香之及描述如下：

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
checkbox	定义复选框。
file	定义输入字段和"“浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

除type属性外，< input>标签还有其他很多属性，常见属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定次input元素首次加载时应当被选中
maxlength	正整数	规定输入字段的字符的最大长度

name和value是每个表单元素都有的属性值主要给后台人员使用，会传给后台.
name表单元素的名字,要求单选按钮和复选框要有相同的name值.
checked属性主要针对于单选按钮和复选框，主要作用一打开页面,就要可以默认选中某个表单元素.
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用.

Q：

表单匀速打开页面就默认显示文字：value属性

用户名：<input type="text" value="请输入用户名"/>

页面元素很多，如何区别不同表单元素：name属性

用户名：<input type="text" value="请输入用户名" name="username"/>

name 属性后面的值，是自定义的
radio（或者checkbox）如果是一组，我们必须给他们命名相同的名字

<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女

页面一打开就让单选按钮或者复选按钮是选中状态：checked

<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女

如何让input表单元素展示不同的形态：type属性

eg:

10-imput表单元素.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素</title>
</head>
<body>
    <form>
        <!-- text 文本框 用户可以里面输入任何值 -->
        <!-- value 页面打开默认显示文字 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br/>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码：<input type="password" name="password"> <br/>
        <!-- radio 单选按钮，可以实行多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字 -->
        <!-- 单选按钮和复选框设置checked属性  当页面打开的时候就会默认选择 -->
        性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br/>
        <!-- checkbox 复选框 可以实现多选，单独写一个也可以 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆" checked="checked"> <br/>
        <!-- 点击了提交按钮，可以把表单域form 里面的表单元素 里面的值 提交到服务器 -->
        <input type="submit" value="免费注册"> <br/>
        <!-- 重置按钮可以还原表单呀u盛怒初始的默认状态 -->
        <input type="reset" value="重新填写"> <br/>
        <!-- 普通按钮 -->
        <input type="button" value="获取短信验证码">
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像：<input type="file">
    </form>
</body>
</html>

页面显示：

在这里插入图片描述

3.4.2 < label>标签

**< label >**标签为input元素定义标注（标签）。

**< label >**标签用于绑定一个表单元素。当点击< label >标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，来增加用户体验。

语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

核心：label标签的for属性应当与相关元素的id属性相同

eg:

11-label标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="text">用户名:</label> <input type="text" id="text">
    <label for="nan">男</label> <input type="radio" name="sex" id="nan"> 
    <label for="nv">女</label> <input type="radio" name="sex" id="nv">
</body>
</html>

3.4.3 < select > 表单元素

使用场景：在页面中，如果有多个选择让用户选择，并且想要节约页面控件时，可以使用**< select >标签控件定义下拉列表**

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    ......
</select>

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

eg:

12-select下拉表单.html

默认选中项是火星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  籍贯:
  <select>
    <option>山东</option>
    <option>北京</option>
    <option>天津</option>
    <option selected="selected">火星</option>
  </select>  
</body>
</html>

页面显示：

在这里插入图片描述

3.4.4 < textarea >表单元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用**< textarea >**标签。

在表单元素中，< textarea >标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：

  <textarea rows="3" cols="20">
      文本内容
  </textarea>

通过< /textarea>标签可以轻松拆功能键多行文本输入框
rows=“显示的行数” cols=“每行中的字符数”，我们在实际开发中不会使用，都是用css来改变大小，不用这两个属性，了解就行，不需要记

eg:

13-textarea文本域.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        今日反馈:
        <textarea rows="5" cols="50">
            这个是textarea 表单元素
        </textarea>
    </form>
</body>
</html>

网页显示：
在这里插入图片描述

3.5 表单元素几个总结点

表单元素学习了三大组input输入表单元素 select下拉表单元素 textarea文本域元素
这三组表单元素都应该包含在form表单域里面，并且有name属性

<form>
    <input type="text" name="username">
    <select name="jiguan">
        <option>北京</option>
    </select>
    <textarea name="message"></textarea>
</form>