html表单

最新推荐文章于 2024-09-28 20:37:19 发布

2301_77954374

最新推荐文章于 2024-09-28 20:37:19 发布

阅读量29

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_77954374/article/details/130545207

版权

文章提供了一个HTML表单的实践示例，包括input、select和textarea等标签的常见属性，如type（文本、密码、单选、复选等）、value、readonly、disabled、id/name、checked和placeholder等，并展示了如何创建用户注册表单，涉及性别选择、兴趣爱好、邮箱验证、文件上传、多选下拉菜单以及日期时间选择等功能。

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

常用标签属性

内部常用标签（包含在form内部）：
一、input标签

常用type属性<input type="">取值:

属性值	含义
text	文本框
password	密码框
button	按钮
radio	单选按钮
checkbox	复选框
email	邮箱
file	文件
image	图片
reset	重置按钮
submit	提交按钮
时间相关属性	time、date、datetime、datetime-local

readonly----只读属性
value----值属性（可指定按钮显示文字）
disabled----不可用属性（呈灰色）
id/name----绑定对象
checked----一般作为单选框的默认选项，配合id使用
placeholder----起提示文本作用

二、select----下拉列表框标签

内部常用标签----option（包含在select内部）
select常用属性:
multiple(转换显示形式)
selected（设置默认值）

三、textarea----文本域标签

常用属性:
cols:设置文本域长度
rows:设置文本域宽度

表单练习示例

在这里插入图片描述

<body align="center">
    <h2>用户注册</h2>
    <form>
        用户名：<input type="text"><br> 
        &nbsp;<br>
        密&nbsp;&nbsp;码 : &nbsp;&nbsp;&nbsp;<input type="password" autofocus="autofocus"><br>
        请选择您的性别:<input type="radio" name="sex" checked text-align="left">男
                      <input type="radio" name="sex">女<br>
        请选择您的爱好：<input type="checkbox">足球<input type="checkbox">篮球
        <input type="checkbox">LOL<input type="checkbox">韩剧<input type="checkbox">王者荣耀<br>
        邮箱：<input type="email" placeholder="请输入您的邮箱"><br>
        用户头像:<input type="file"><br>
        您的家庭住址是:
        <select>
            <option>重庆</option>
            <option>四川</option>
            <option selected>西安</option>
        </select><br>
        您的收货地址是：
        <select multiple>
            <option>请选择您的收获地址</option>
            <option>永川</option>
            <option selected>江北</option>
            <option>万州</option>
        </select><br>
        请留下您的建议或者意见:
        <textarea cols="15" rows="5">
您的建议或者意见
        </textarea><br>
        请您选择您喜欢的颜色：<input type="color">
        注册的时间<input type="datetime-local"><br>
        <input type="button" value="注册"><input type="reset">
    </form>
</body>