简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4.23号作业2-制作登陆表单
Blogger Information
Blog 20
fans 0
comment 0
visits 29384
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4.23号作业2-制作登陆表单
蜗牛是条鱼
Original
591 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form action="" method="get">
    <p>用户注册</p>
    <p>
        <label for="username">账号：</label>
        <!--autofocus 聚焦-->
        <input type="text" id="username" name="username"  placeholder="不允许大于8个字符" required autofocus>
    </p>

    <p>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="6-12个字符" required>
    </p>

    <p>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="example@email.com" required>
    </p>

    <p>
        <label for="age">年龄：</label>
        <input type="number" name="age" id="age" min="6" max="70">
    </p>

    <p>
        <label for="birthday">生日：</label>
        <input type="date" name="birthday" id="birthday">
    </p>

    <p>
        <label for="phone">手机号：</label>
        <input type="tel" name="phone" id="phone" min="11" max="11" placeholder="请填写手机号码" required>
    </p>

    <p>
        <!--下拉框组成是两组标签。 第一组名称 label标签，第二组 select 与option 标签。-->
        <!--同时要注意的是option标签跟的是value-->
        <label for="crab">螃蟹：</label>
        <select name="crab" id="crab">
            <option value="1">2两母蟹</option>
            <option value="2">2.5两母蟹</option>
            <option value="3" selected>3两母公蟹</option>
            <option value="4">4两母公蟹</option>
        </select>
    </p>
    <!--复选框-->
    <p>
        <!--复选框还是input学到了新的知识，就是type是checkbox，后面跟的是label for与前面的value对应-->
        <label for="write">爱好：</label>
        <input type="checkbox" id="read" name="hobby[]" value="read"> <label for="read">读书</label>
        <input type="checkbox" id="write" name="hobby[]" value="write"> <label for="write">写字</label>
        <input type="checkbox" id="game" name="hobby[]" value="game"> <label for="game">打游戏</label>
    </p>

    <p>
        <!--单选框只能选择一个，input后面跟的是 radio -->
        <label for="secrecy">性别：</label>
        <input type="radio" id="male" name="gender" value="male"> <label for="male">男生</label>
        <input type="radio" id="female" name="gender" value="female"> <label for="female">女生</label>
        <input type="radio" id="secrecy" name="gender" value="secrecy"> <label for="secrecy">保密</label>
    </p>

    <p>
        <label for="comment">简介：</label>
        <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
    </p>

    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
        <button>提交</button>
    </p>
</form>
</body>
</html>

运行实例 »

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



表单学习总结：
1.表单和label配合使用，label的for跟 表单的input的属性配合使用
2.其中
name 属性用于在提交表单时搜集字段的值；
value 属性为 input 元素规定值。
对于不同类型的 input 元素，value 属性的用法也不同：
对于 "button", "reset", "submit" 类型 - 定义按钮上的文本
对于 "text", "password", "hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox", "radio", "image" 类型 - 定义与 input 元素相关的值。该值会发送到表单的 action URL。
注释：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
3.label是html5特有的，是定义 input 元素的标注。
4.<label> 标签的 for 属性应当与相关元素的 id 属性相同。

===以上几点在实战中灵活运用要记牢。

Correction status：Uncorrected

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
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！