HTML的表单标签

news2024/11/19 2:46:55

🌟 所属专栏：HTML只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新HTML的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍HTML表单标签，学习内容来自b站的 @黑马程序员的视频

😮1 为什么需要表单

为了收集用户信息，让他们填写。

🏰2. 表单的组成

一个完整的表单通常由表单域，表单控件和提示信息构成。

📋3 表单域

表单域是一个包含表单元素的区域，form用于定义表单域，会把它范围内的表单元素信息提交给服务器。

语法

<formaction=”要提交的服务器的url地址” method =“提交的方式” name=”表单域的名称”>

属性	属性值	作用
Action	url地址	指定接受并处理表单信息的服务器url地址
Method	Get/post	设置表单数据的提交方式
Name	名称	指定表单的名称，用于区分同一个页面的多个表单域

<!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>

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

允许用户在表单中输入后者选择的内容控件，具体类别如下：

1. Input输入表单元素

语法

<input type=”属性值” />，input标签是单标签，type属性值必须有，不同则具体功能不同

Type属性值：

属性值	描述
Button	可点击按钮，不提交数据，但是搭配js实现一些特殊功能
File	供文件上传
Hidden	定义隐藏的输入字段
Image	定义图像形式的提交按钮
Submit	定义提交按钮，会把表单数据交给服务器
Text	文本
Radio	多选一，name属性必须一样
Checkbox	复选框，name属性必须一样

Name属性值：区分不同的输入表单（方便后台）

Value属性值：定义默认值，一般用在text，radio中（方便后台）

Checked属性值：主要用于type中的单选框和复选款，用于实现默认勾选

Maxlength属性值：设置最多输入多少文字，一般用于type属性值的text，较少使用

<!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="">
        <!-- text 文本框 可以输入任何文字 -->
        用户名：<input type="text" value="请输入用户名" maxlength="10"><br>
        <!-- password 密码框 -->
        密码：<input type="password"><br>
        <!-- 单选框和复选框可以设置checked属性默认选中 -->
        <!-- radio 单选按钮 name属性必须一样-->
        姓名：男 <input type="radio" name="sex" value="male" checked="checked"> 女 <input type="radio" name="sex" value="female"><br>
        <!-- checkbox复选框 -->
        爱好：吃饭 <input type="checkbox" name="hobby" checked="checked"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox"
            name="hobby"><br>
        <!-- 提交按钮把表单域的值交给服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮，清楚填写了的数据重写填写 reset -->
        <input type="reset" value="重新填写"><br>
        <input type="button" value="获取验证码"><br>
        <!-- 文件域 用于上传文件 -->
        上传头像：<input type="file">
    </form>
</body>

</html>

2. label标签

使用场景

Label标签为input元素定义标注。简单来说就是扩大可点击的范围。当label标签用于绑定一个表单元素，那么之哟啊点击label标签内的文字时，浏览器就会自动将光标转到对应的表单元素上，防止有些表单元素比较小不好点击。从而增加用户体验。

语法

<!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"><br>
    <label for="male">男</label> <input type="radio" id="male">
</body>
</html>

3. select下拉表单元素

使用场景

如果有多个选项让用户选择，可以节省空间。

语法

……

</select>

注意：select中至少包含一对option

可以为某一个option设置属性selected来设置默认选择的

<!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="">
        籍贯：
        <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="" selected="selected">深圳</option>
        </select>
    </form>
</body>
</html>

4. textarea文本域元素

使用场景

用户输入内容较多时，用input text就不够了。常用于评论，留言板等。Textarea用于定义多行文本输入

Cols和rows都是用css指定

<!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="">
        <textarea name="" id="" cols="30" rows="10">好的
        </textarea>
    </form>
</body>
</html>