HTML表单与label标签的使用

baibai___

已于 2022-06-12 17:04:33 修改

阅读量1.1k

点赞数 5

分类专栏：前端文章标签： html 前端表单 label标签

于 2022-06-12 17:03:21 首次发布

本文链接：https://blog.csdn.net/qq_53843555/article/details/125247089

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html表单代码

1.记录了一些使用过的表单代码
先看看效果：
在这里插入图片描述

填写后：
在这里插入图片描述
具体代码如下所示：

<!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>
    <h1>注册</h1>
    <form action="#" method="post">
        <!-- value="xx" :默认值，name="xx"：控件名称，size="xx"：input在页面中的显示宽度，maxlength="xx"：控件中允许输入的最多字符数，readonly：只读不可修改，disabled：第一次加载控件时禁止使用，checked：默认选中 -->

        <!-- 文本输入框-->
        名字：<input type="text" name="name" value="123"><br><br>
        <!-- 密码-->
        密码：<input type="password" name="password"><br><br>
        <!--单选框,需要同一个name-->
        性别：
        <input type="radio" value="man" name="sex" />男
        <input type="radio" value="woman" name="sex" />女<br><br>
        <!--多选框-->
        兴趣爱好：
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="read" name="hobby">看书<br><br>
        <!--按钮-->
        按钮：<input type="button" name="btn1" value="我是按钮">
        图片形式按钮：<input type="image" src="img/feng1.jpg " style="height: 20px; width:100px"><br><br>
        <!--文件域-->
        <input type="file" name="files"><br><br>
        <!-- select控件：下拉菜单 -->
        国家：
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="China">中国</option>
            <option value="China" >中国</option>
            <option value="China">中国</option>
        </select>
        地址：
        <select name="列表名称">
            <optgroup label="重庆">
            <option value="s" selected>沙坪坝区</option>
            <option value="y">渝中区</option>
            <option value="g" >高新区</option>
            </optgroup>
        </select><br><br>
        <!-- textarea控件，文本域 -->
        备注：<textarea name="textarea" cols="30" rows="10">文本域</textarea><br><br>
        <!-- 数字，       max：最大值，min：最小值，step：每次增加减少的个数-->
        体重：<input type="number" name="weight" max="500" min="10" step="1"><br><br>
        <!-- 滑块 -->
        滑动：<input type="range" name="voice" min="10" max="300" step="2"><br><br>
        <!-- 喜欢的颜色 -->
        喜欢的颜色是：<input type="color" name="color" ><br><br>
        <!-- 提交，重置按钮-->
        <input type="submit">
        <input type="reset">
    </form>
</body>

</html>

2.label标签的使用
与其他表单控件相关联，点击label，关联的控件响应，可以增强用户体验
使用方法：

<!-- label的使用1 -->
<label for="myname">用户名:</label>
<input type="text" id="myname">
<!-- label的使用2 -->
<label >用户名:<input type="text" ></label>

原本点击用户名，文本框控件无响应。
在这里插入图片描述

使用label标签之后，点击用户名，文本框响应。
在这里插入图片描述

202206121702日

baibai___

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML表单与label标签的使用

HTML表单与label标签的使用
复制链接

扫一扫

专栏目录

HTML表单与label标签的使用

html表单代码

“相关推荐”对你有帮助么？