06 表单标签

<!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>

 

posted @ 2019-01-10 17:25  马玉刚  阅读(112)  评论(0编辑  收藏  举报