前端学习日记（四）：html中fieldset、select、textarea、input其他属性、H5新增type属性的简单应用

最新推荐文章于 2023-01-02 09:34:12 发布

VIP文章孤月儿

最新推荐文章于 2023-01-02 09:34:12 发布

阅读量598

点赞数

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

本文链接：https://blog.csdn.net/m0_46364332/article/details/104533466

版权

一、表单-2
1.fieldset（组件用于在一个web表单中对多个控件和标签进行分组）
【fieldset的标题由<legend>标签提供】

<body>
    <form action="" method="get">
        <fieldset>
            <legend>必填项</legend>
            <div>
                <label for="">用户名:</label>
                <input type="text">
            </div>
            <div>
                <label for="">密码：</label>
                <input type="password">
            </div>
        </fieldset>
    </form>
</body>

浏览器中效果：
在这里插入图片描述
当在fieldset标签中添加disabled属性，表示禁用组件，禁用组件的值也不能被提交，效果如下：

2.input其他属性

<body>
    <form action="" method="get">
        <!-- input的其他属性  size控件宽度和maxlength可输入最大字符数-->
        <div>
            用户名：<input type="text">
            <br>
            用户名：<input type="text" size="40" maxlength="5">
            </div>
    </form>
</body>

浏览器中效果：【这里能看到第二个文本框中只能输入5个字符】
在这里插入图片描述 属性：

size 当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20 。
maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password

3.select（用于表示下拉列表或列表）

<body>
    <form action="#">
        <div>
            籍贯：
            <select name="adress" id=

最低0.47元/天解锁文章

孤月儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习日记（四）：html中fieldset、select、textarea、input其他属性、H5新增type属性的简单应用

VS code中 fieldset（分组）、input其他属性、select（下拉列表）、textarea（多行文本框）、H5新增type属性（数字、搜索、范围、电话、url、email、颜色、日期、时间控件）
复制链接

扫一扫