Blogger Information
Blog 11
fans 0
comment 0
visits 10285
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单提交及空间常用的元素的使用2019-0702
简单的博客
Original
600 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>
<h style="font-size: 30px">用户调查表单</h>
<br>
<br>
<br>
<form action="" method="get" name="register">
   <p>
       <!--label中的for属性值与input中的id属性值一致
            autofocus自动获取焦点
       -->
       <label for="username" style="font-size: 20px">用户:</label>
       <input type="text" id="username" name="username" placeholder="中文名字" autofocus>
   </p>
    <p>
        <lable for="password" style="font-size: 20px">密码:</lable>
        <input type="password" id="password" name="password" placeholder="字母和数字组成" autofocus>
    </p>
    <p>
        <lable for="birthday">生日:</lable>
        <input type="date" id="birthday" name="birthday" placeholder="年/月/日" autofocus>
    </p>
    <p>
        <lable for="email">邮箱:</lable>
        <input type="email" id="email" name="email" placeholder="email@qq.com" autofocus>
    </p>
    <p>
        <lable for="age">年龄:</lable>
        <input type="number" id="age" name="age" placeholder="" min="10" autofocus>
    </p>
    <p>
        <lable for="traffic">交通工具:</lable>
        <select name="traffic" id="traffic" size="1">
            <optgroup label="方式">
                <option value="0">步行</option>
                <option value="1">乘车</option>
                <option value="2">开车</option>
            </optgroup>
            <optgroup label="其他">
                <option value="4">跑步</option>
                <option value="5">慢行</option>
            </optgroup>
        </select>
    </p>
    <p>
        <lable for="interest">兴趣:</lable>
        <input type="checkbox" id="interest" name="interest[]" value="interest">
        <lable for="interest">玩耍</lable>
        <input type="checkbox" id="game" value="game" name="game[]">
        <lable for="game">玩游戏</lable>
        <input type="checkbox" name="play[]" id="play" value="play">
        <label for="play">打</label>
    </p>
    <p>
        <lable for="sex">性别:</lable>
        <input type="radio" id="sex" name="sex" value="sex">
        <lable for="sex">男</lable>
        <input type="radio" id="girl" name="sex" value="girl">
        <lable for="girl">女</lable>
    </p>
    <p>
        <lable for="comment">简介</lable>
        <textarea name="comment" id="comment" cols="30" rows="10" placeholder="请输入您的简介"></textarea>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <button>提交3</button>
        <button type="submit">提交1</button>
        <button type="button">提交4</button>

    </p>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

test1.png

Correction status:qualified

Teacher's comments:表单中几乎全部的标签你都用到了, 恭喜
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments