HTML5 表单进阶

最新推荐文章于 2024-11-12 10:23:07 发布

LyaJpunov

最新推荐文章于 2024-11-12 10:23:07 发布

阅读量236

点赞数

分类专栏： # HTML5 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_43903639/article/details/121780392

版权

HTML5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML中的几种常见表单元素，包括单选框（Radio）、复选框（Checkbox）、文件上传（File）、下拉菜单（Select）和文本域（Textarea）。通过实例展示了它们的用法和属性，如name用于分组，checked用于默认选中，disabled实现禁用，以及如何使用label扩展选择等功能。这些元素在网页交互中起到关键作用，帮助用户输入和选择信息。

摘要由CSDN通过智能技术生成

表单进阶

单选框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>您对于我们的满意度如何</div>
<div>
    <!--name的值一样，只能单选-->
    <!--checked可以实现默认选中，可以只写属性名不写属性值-->
    <input type="radio" name="a1" value="" checked="checked">非常满意 <br>
    <input type="radio" name="a1" value="">一般 <br>
    <input type="radio" name="a1" value="">不满意
</div>
<div>您的性别</div>
<div>
    <!--label标签可以实现扩展选择，即使点击文本也可以选择-->
    <input type="radio" name="sex" id="man" checked="checked"><label for="man">man</label> <br>
    <input type="radio" name="sex" id="woman"><label for="woman">woman</label>
</div>

</body>
</html>

复选框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>您的兴趣爱好</div>
<div>
    <input type="checkbox" name="interest">抽烟 <br>
    <input type="checkbox" name="interest" checked="checked">喝酒 <br>
    <input type="checkbox" name="interest">烫头 <br>
    <input type="checkbox" name="interest">泡妞 <br>
</div>
<div>您的擅长技术</div>
<div>
    <input type="checkbox" name="goodAt" checked="checked">python <br>
    <input type="checkbox" name="goodAt" checked="checked">C <br>
    <input type="checkbox" name="goodAt">django <br>
    <input type="checkbox" name="goodAt">spider <br>
    <input type="checkbox" name="goodAt">html <br>
    <input type="checkbox" name="goodAt">css <br>
    <input type="checkbox" name="goodAt">js <br>
    <!--disabled可以实现禁用，只读属性，和checked一样可以只写属性-->
    <input type="checkbox" name="goodAt" disabled="disabled">vue <br>
</div>
</body>
</html>

上传文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>请截图说明</div>
    <div>
        <input type="file" name="file" value="">
    </div>
</div>
<!--用图片代替提交按钮-->
<div>图片按钮</div>
    <div>
        <input type="image" src="1.png">
    </div>
</div>
<!--将按钮藏起来，将value数据传给后端，本就不是给普通用户看的-->
<div>隐藏按钮</div>
    <div>
        <input type="hidden" src="1.png" value="">
    </div>
</div>
</body>
</html>

下拉菜单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>选择您的收货地址</div>
    <!--select支持的属性
        size：显示出来几个属性，默认为1
        multisim：可以选择几个属性，默认为1
        -->
    <select name="provice" id="provice" size="1">
        <!--value 是后端所需要的属性值，必须设置 selected 默认选中属性-->
        <option value="ln">河北省</option>
        <option value="hn" selected="selected">河南省</option>
        <option value="sd">山东省</option>
        <option value="sx">山西省</option>
    </select>
</body>
</html>

文本域

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*虽然我们设置了宽高，但是这个文本框还是可以随意移动大小的*/
        textarea{
            width: 300px;
            height: 200px;
            /*重新设置大小属性*/
            /*vertical垂直方向可以*/
            resize:vertical;
        }
    </style>
</head>
<body>
    <div>您的意见就是我们改进的动力</div>
    <div>
        <!--placeholder 预制文本框，提示文字-->
        <!--value 提前设置好的值，默认的value是写在双标签的内部，注意换行会带来默认值-->
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入您的意见"></textarea>
    </div>
</body>
</html>

字段集

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        fieldset{
            width: 200px;
            border:1px solid tomato;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>个人信息</legend>
        <fieldset>
            <legend>性别</legend>
            <input type="radio" name="sex"> 男
            <input type="radio" name="sex"> 女
        </fieldset>
        <fieldset>
            <legend>爱好</legend>
            <input type="radio" name="sex"> 抽烟
            <input type="radio" name="sex"> 喝酒
            <input type="radio" name="sex"> 烫头
        </fieldset>
    </fieldset>

</body>
</html>