表单进阶单选框多选框

最新推荐文章于 2025-04-04 00:58:22 发布

Ezr-

最新推荐文章于 2025-04-04 00:58:22 发布

阅读量5k

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/m0_70877859/article/details/125858554

版权

本文介绍了HTML表单的高级用法，包括单选框、多选框的使用，详细讲解了上传文件、隐藏字段、只读与禁用状态的设置，还涵盖了下拉菜单和多行文本输入框的操作。此外，还提到了字段集的应用。

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

1.单选框

<input type="radio" name="aaa" id="man">
<label for="man">男</label>
name 组名
相同组名只能选一个

label 设置for="" 与id="" 相同  可以点击文字选择

<input type="radio" name="aaa" checked="checked">
checked 默认选择

2.多选框

<input type="checkbox" name="" id="man">
<label for="man">男</label>
label 设置for="" 与id="" 相同  可以点击文字选择

checked="checked"   
默认选择，多选框中可以多设置几个默认选择

补充

input[type=checkbox]{
            appearance: none;
            width: 20px;
            height: 20px;
            border: 1px solid black;

        }
选择框标签受默认样式限制不能随意更改，需要先将样式清除
appearance: none;
再进行更改

3.上传文件和隐藏字段，只读禁用

<input type="file" name="" id="">
上传文件
<form action="">
    <!--上传地址 -->
<input type="image"src="">
</form>
图片按钮-代替提交按钮<input type="submit">

隐藏按钮
<input type="hidden" name="" id="" value="带给后端个人信息">

禁用，只读
<button disabled="disabled">注册</button>
<input type="radio" disabled>不满意
<input type="text" readonly>
disabled不能选择 禁用
readonly只读 不能修改

4.下拉菜单

 <div>地址</div>
    <!-- select支持的属性
    1.size  显示几个选项
    2.multiple   多选 按CTRL shift多选

 -->
 <!-- 
     option 支持属性
     1.value, 提供给后端需要的value值
     2.selected，默认选中

  -->
    <select size="1">
        <option value="">辽宁</option>
        <option value="">山东</option>
        <option value="">山西</option>
        <option value="">北京</option>
        <option value="" selected>河南</option>
    </select>
    <div>
        <select  multiple >
            <option value="">凳子</option>
            <option value="" selected>桌子</option>
            <option value="" selected>电脑</option>
            <option value="" selected>椅子</option>
    </div>

5.多行文本输入框-文本域

.aa{
            width: 300px;
            height: 300px;
            resize:none ;
            /* resize  重新设置大小，
            vertical只能在垂直方向重新设置
            ，horizontal只能在水平方向重新设置
            ,both 默认，可以随意设置大小
            none 不可以重新设置大小
            */
        }
<div>
        <!-- 
            clos输入几列
            rows输入几行
            不常用
            placeholder提示文字
            textarea默认value：写在双标签内部，注意空格问题
         -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        <textarea class="aa" placeholder="请输入你的意见">aaa</textarea>
    </div>

6.字段集 1111

*****语法
<fieldset>
    <legend></legend>
</fieldset>
legend在fieldset的边框添加文字
legend和fieldset可以添加常用属性边框大小背景颜色等等

fieldset{
            border: 2px solid blue;
            background-color: aqua;
            width: 200px;height: 200px;
        }
        legend{
            border: 1px solid;
            text-align: center;
        }
<fieldset>
        <legend>性别</legend>
        <input type="radio" name="aa">男
        <br>
        <input type="radio" name="aa">女
    </fieldset>
    <fieldset>
        <legend>爱好</legend>
        <input type="checkbox" name="bb">抽烟
        <br>
        <input type="checkbox" name="bb">喝酒
    </fieldset>