8-2 html中的表单标签 input

最新推荐文章于 2024-05-14 16:27:26 发布

邢邢好吧（前端学习中）

最新推荐文章于 2024-05-14 16:27:26 发布

阅读量618

点赞数 12

分类专栏： # html学习前端学习文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_61897906/article/details/137927320

版权

前端学习同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html学习

10 篇文章 0 订阅

订阅专栏

8.4.1 input输入表单元素

#<input />标签：用于收集用户信息，单标签

属性值：

1. type属性：根据不同的type属性值，输入字段拥有很多种形式，如文本、复选框、掩码后的文本控件、单选按钮等

文本框：<input type="text" />

单选按钮：<input type="radio" />

重置按钮：<<input type="reset" /> 还原为表单的初始状态

提交按钮：<input type="submit" /> 把表单域里数据提交给服务器

提交按钮里的文字一般是提交，要改变的话加value属性：<input type="submit" value="注册"/>

普通按钮：<input type="button" value="发送验证码"> 后期结合js

文件域：<input type="file"> 点击上传文件

2.name属性是表单元素的名字

要注意的是单选的选项必须有相同的名字才能实现多选一的效果

复选框的选项也必须有相同的name属性

3.value属性用于定义input元素的值

注意！

1.name属性和value属性是每个元素都有的属性，主要是给后台人员使用的

2.name属性表单元素的名字，要求单选按钮和复选框有相同的name值

4.checked属性表示某元素首次加载时就应当被选中

主要针对单选按钮和复选框

单选：只能给一个元素checked

<input type="radio" name="sex" value="沃尔玛购物袋" checked="checked">沃尔玛购物袋

复选框：可以给多个

5.maxlength属性规定可输入字符最大长度

试试代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get"> 
        <!-- 示范 -->
        <!-- text 文本框，用户可以输入文字 -->
        用户名：<input type="text"><br>
        <!-- value属性 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="8"><br>
        <!-- maxlength属性 规定可输入字符最大长度-->

        <!-- password 密码字段，输入被掩码-->
        密码：<input type="password" name="pwd" ><br>

        <!--radio 单选按钮，实现多选一-->
        <!-- 还未实现单选 -->
        性别：
        <input type="radio">男 
        <input type="radio">女<br>
        <!--radio 单选按钮，实现多选一-->
        <!-- 已经实现单选 -->
        性别：
        <input type="radio" name="sex" value="男">男 
        <input type="radio" name="sex" value="女">女
        <!-- checked属性 代表元素首次加载便被选中 单选只能给一个，多选随便-->
        <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="打豆豆">打豆豆<br>
        
        <!-- 重置按钮reset 可以还原表单的初始状态 -->
        <input type="reset">
        <input type="reset" value="重新填写"><br>
        <!-- 提交按钮submit 可将表单域中的文字提交给服务器 -->
        <input type="submit">
        <input type="submit" value="免费注册"><br>
        <!-- 普通按钮button 后期结合js -->
        <input type="button" value="发送验证码"><br>
        <!-- 文件域 点击上传文件 -->
        <input type="file">


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

6.属性小结：你记住了吗？

#<label>标签定义标注标签

<label> 标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上：

比如在选择性别时，不需要点击单选按钮，只需要点击单选按钮的文字"男"，即可选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签</title>
</head>
<body>
    <form action="xxx.php" method="get">
    性别：<br>
    <input type="radio" name="sex" value="男" id="男"> <label for="男">男</label> <br>
    <input type="radio" name="sex" value="女" id="女"> <label for="女">女</label> <br>
    <input type="radio" name="sex" value="沃尔玛购物袋" checked="checked" id="沃尔玛购物袋"><label for="沃尔玛购物袋">沃尔玛购物袋</label><br>

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

邢邢好吧（前端学习中）

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
8-2 html中的表单标签 input

标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上：比如在选择性别时，不需要点击单选按钮，只需要点击单选按钮的文字"男"，即可选择<head><title>label标签</title></head><body>性别：<br><input type="radio" name="sex" value="男" id="男"> <label for="男">男
复制链接

扫一扫