06 表单标签

最新推荐文章于 2024-10-16 16:55:14 发布

转载最新推荐文章于 2024-10-16 16:55:14 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mayugang/p/10251271.html

本文详细介绍了HTML表单的各种元素及其属性，包括文本输入、密码输入、单选和多选按钮、日期选择器、下拉菜单、文件上传、文本区域等，以及如何设置这些元素的样式和行为。

<!DOCTYPE html>
<!--设置该页面是以中文显示和阅读为基础的-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单标签</title>
    <style>
        #pwd{
            margin-left: 15px;
        }
    </style>
</head>
<body>
<form action="http://127.0.0.1:8080" method="get" enctype="multipart/form-data">
<!--设置表单元素-->
    <p>
        <label for="usrname">用户名：</label>
        <!--type设置为text时，输入时采用文本的方式进行输入 -->
        <input type="text" name="usrname" value="" id="usrname">
    </p>
    <p>
        <label for="pwd">密码：</label>
        <!--type设置为password后可以直接将密码加密显示-->
        <input type="password" name="pwd" value="" id="pwd">
    </p>
    <p>
        <h3>单选</h3>
        <!--radio：设置单选项，通过name设置为同一个值，来实现互斥的效果-->
        <input type="radio" name="sex" value="1">男
        <!--checked：设置默认值-->
        <input type="radio" name="sex" value="0" checked="checked">女
        <input type="radio" name="sex" value="2">其他
    </p>
    <p>
        <h3>多选</h3>
        <input type="checkbox" checked>抽烟
        <input type="checkbox" checked>喝酒
        <input type="checkbox" >烫头
    </p>
    <p>
        <h3>当前时间</h3>
        <input type="date">
    </p>
    <p>
        <!--select标签：下拉框选择标签,其中multiple是设置为多选，不写时为单选-->
        <!--单选-->
        <select name="fav" id="">
            <!--option标签：与select标签一起使用，设置select标签的下拉选项-->
            <option value="basketball" selected>篮球</option>
            <option value="football">足球</option>
            <option value="pingpang">乒乓球</option>
        </select>
        <br>
        <br>
        <br>
        <!--多选-->
        <select name="fav" id="" multiple>
            <!--option标签：与select标签一起使用，设置select标签的下拉选项-->
            <option value="basketball" selected>篮球</option>
            <option value="football">足球</option>
            <option value="pingpang">乒乓球</option>
        </select>
    </p>
    <p>
        <h3>文件上传</h3>
        <input type="file" name="file">
    </p>
    <p>
        <!--设置文本框的大小-->
        <textarea name="" cols="30" rows="5"></textarea>
    </p>
    <p>
        <input type="submit" value="登录">
        <input type="button" value="注册">
        <button>注册2</button>
        <input type="button" value="注册" disabled>
    </p>
</form>

</body>
</html>

转载于:https://www.cnblogs.com/mayugang/p/10251271.html