表单标签form_form表单中,用于提交请求数据的属性是-优快云博客

本文链接：https://blog.youkuaiyun.com/zhujianghan/article/details/120875925

本文详细介绍了HTML中的表单标签<form>，包括它的属性如action和method，以及表单项标签<input>的各种type属性，如text、password、checkbox、radio等。还提到了<label>标签的作用以及<select>下拉列表和<textarea>文本域的用法。通过一个注册页面的案例展示了实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单标签

概念

用于采集用户输入的数据。用于和服务器交互

form

用于定义表单。可以定义一个范围，范围代表采集用户数据的范围。

属性：

action 指定提交数据的URL（原网页则为#）
method 指定提交方式（共七种，介绍2种）
get：1. 请求参数会在地址栏显示，会封装在请求行中 2.请求参数大小是有限制的 3. 不太安全
port：1. 请求参数不会在地址栏显示，会封装在请求体中（http协议）2. 请求参数大小无限制 3. 较为安全
表单项中的数据要想被提交，必须指定其name属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单属性</title>
</head>
<body>
    <form action="#" method="get">
        用户名：<input name="username"><br>
        密码：<input name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

在这里插入图片描述

fn+f12开发者工具

表单项标签

input

可以通过type属性组，改变元素展示的样式

type属性

test 文本输入框，默认值（placeholder：指定输入框的提示信息，当输入框发生变化时，会自动清空提示信息）
password 密码输入框
audio 单选框（1. 要想让多个单选框实现单选效果，则多个单选框name属性组必须相同 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. cheched属性，可以提供默认值）
checkbox：复选框（1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. cheched属性，可以提供默认值）
file 上传文件
hidden 隐藏域
color 取色器
date 日期（年月日）
datetime-local(年月日时分)、
email 邮箱（校验）
number 只能填数字
submit 提交按钮
button 普通按钮
image 图片按钮

lable标签（指定输入项的文字描述信息）

lable标签的for属性一般会和input里的id属性值对应。如果对应了，则点击lable区域，会让input输入框获取焦点

select下拉列表

子元素：option 指定列表项（默认项select）

textarea文本域

属性：rows clos name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单属性</title>
</head>
<body>
    <form action="#" method="get">
        <label for="username">用户名：</label><input type="test" name="username"  placeholder="请输入用户名" id="username"><br>
        <label for="password">密码：</label><input type="password" name="password" placeholder="请输入密码" id="password"><br>
        <label>性别</label>
            <input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="famale">女<br>
        <label>爱好</label>
            <input type="checkbox" name="hobby" value="shopping">购物
            <input type="checkbox" name="hobby" value="java" checked>java
            <input type="checkbox" name="hobby" value="game">游戏<br>
        文件<input type="file" name="file"><br>
        隐藏域<input type="hidden" name="hidden" value="aaa"><br>
        取色器<input type="color"><br>
        生日<input type="date" name="birthday"><br>
        生日<input type="datetime-local" name="birthday"><br>
        邮箱<input type="email"><br>
        年龄<input type="number"><br>
        省份<select name="province">
                <option>--请选择--</option>
                <option selected>--湖北--</option>
                <option>--山西--</option>
                <option>--陕西--</option>
            </select><br>
        文本域<textarea name="des" cols="20" rows="5"></textarea>
        <input type="submit" value="登录"><br>
        <input type="button" value="普通按钮"><br>
        <input type="image" src="image/1.jpg"><br>
    </form>
</body>
</html>

在这里插入图片描述

案例（注册页面）

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" align="center">
    <form action="#" method="get">
        <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username" placeholder="请输入账号"></td>
        </tr>
        <tr>
            <td><label for="password">密码</label></td>
            <td><input name="password" type="password" id="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td><label for="mail">Email</label></td>
            <td><input name="mail" type="email" id="mail" placeholder="请输入Email"></td>
        </tr>
        <tr>
            <td><label for="name">姓名</label></td>
            <td><input id="name" name="name" type="text" placeholder="请输入真实姓名"></td>
        </tr>
        <tr>
            <td><label for="tel">手机号</label></td>
            <td><input name="text" id="tel" placeholder="请输入您的手机号" type="tel"></td>
        </tr>
        <tr>
            <td><label>性别</label></td>
            <td>
                <input type="radio" name="sex" value="male" checked>男
                <input type="radio" name="sex" value="famale">女
            </td>
        </tr>
        <tr>
            <td><label>出生日期</label></td>
            <td><input type="date" name="birthday"></td>
        </tr>
        <tr>
            <td><label>验证码</label></td>
            <td>
                <input type="text" name="code">
                <img src="image/1.jpg" width="100" height="100">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="注册"></td>
        </tr>
    </form>
</table>
</body>
</html>

效果

在这里插入图片描述