表单标签用法

The CrazyMan

已于 2023-01-24 10:28:44 修改

阅读量343

点赞数

分类专栏：前端web 文章标签： html5

于 2022-12-13 15:59:59 首次发布

本文链接：https://blog.csdn.net/qq_42897323/article/details/128296692

版权

前端web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

记录学习前端HTML里面的form表单标签，单选框，多选框，数字框，下拉框，多行文本框，按钮标签

文章目录

一、表单标签
二、单选框
三、多选框
四、数字框
五、下拉框
六、多行文本域
七、按钮
八、datalist标签

正文内容：

一、表单标签

表单标签是form标签，包含action属性，指定表单提交的目标地址；method属性，指定提交表单的方式（get或者post）
表单需要提交数据，则使用input输入框标签进行提交，包含type属性，指定输入框的类型；placeholder属性，指定输入框的提示信息
表单输入框前面需要给出显示信息提示用户输入框输入的内容，则使用lable标签；lable标签包含属性for属性，可以将lable标签与input标签通过input标签的id属性进行绑定

范例代码：

<!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 action="#" method="">
        <table>
            <tbody>
                <tr>
                    <td><label for="account">账户：</label><input type="text" id="account" placeholder="请输入账户"></td>
                </tr>
                <tr>
                    <td><label for="password">密码：</label><input type="password" id="password" placeholder="请输入密码"></td>
                </tr>
            </tbody>
        </table>
    </form>
</body>

</html>

效果图如下所示：
在这里插入图片描述

二、单选框

在注册页面，对于性别的选择需要使用单选框进行；可以使用input标签，设置其type属性为radio，然后设置name属性；单选框有多个子选项，需要将这些子选项的name属性值设置相同；name属性将子选项进行了分组，相同的name则表示是同一组内容；name属性也是前端提交数据到后端时的参数字段名称；input标签默认是文本输入框，如果设置type属性为radio后，则需要通过value属性将值进行绑定

三、多选框

如果需要多种选项同时被选择，则需要使用多选框；多选框则是将input标签的type属性更改为checkbox；用法与单选框类似

四、数字框

当输入框中只需要输入数字时，使用数字框；此时使用input标签，并将其type属性值设置为number

五、下拉框

下拉框是使用select标签，用select标签包裹option标签实现；设置select标签的name属性用于传递数据到后端，name属性值是后端接受时的参数字段名称；option标签设置value属性绑定下拉框值，这里的值是传递到后端的具体数据

六、多行文本域

当需要输入多行文本内容的时候，则使用textarea标签，包含cols属性定义标签所占列数， rows属性定义标签所占行数

七、按钮

button标签默认的type属性值是submit，用于将表单数据提交到目标地址

1~7标签的使用范例代码如下：

<!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 action="#" method="">
        <table>
            <tbody>
                <tr>
                    <td><label for="account">账户：</label><input type="text" id="account" name="account"
                            placeholder="请输入账户"></td>
                </tr>
                <tr>
                    <td><label for="password">密码：</label><input type="password" id="password" name="password"
                            placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td>
                        <label for="age">年龄：</label><input type="number" id="age" name="age" min="0" max="120">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>性别：</label>
                        <input type="radio" name="gender" value="男" checked>男
                        <input type="radio" name="gender" value="女">女
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>爱好：</label>
                        <input type="checkbox" name="hobby" value="乒乓" checked>乒乓
                        <input type="checkbox" name="hobby" value="羽毛球">羽毛球
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="address">地址：</label>
                        <select id="address" name="address">
                            <option value="陕西" selected>陕西</option>
                            <option value="河南">河南</option>
                            <option value="北京">北京</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="remark">备注：</label>
                        <textarea id="remark" name="remark" cols="30" rows="10">请填写备注信息</textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button>提交</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>

</html>

效果图如下所示：
在这里插入图片描述

八、datalist标签

input标签新增属性list，用于定义数据列表，使用datalist标签定义数据源；input标签的list属性值与datalist标签的id属性值一致

范例代码如下：

<!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>video标签练习</title>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <input list="address">
                    <datalist id="address">
                        <option value="陕西"></option>
                        <option value="北京"></option>
                        <option value="河南"></option>
                        <option value="山东"></option>
                        <option value="浙江"></option>
                    </datalist>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>