WEB前端：(6)HTML5⑤表单_web li表单-优快云博客

本文详细介绍了HTML表单的各种元素及其用途，包括文本输入框、密码框、复选框、单选按钮、文件上传控件、下拉列表、文本域、隐藏键值等，并通过实例展示了如何构建一个用户注册表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单的作用是让用户填写数据，最后提交到服务器。

标签 <lable></label>

for点击时自动对焦到id为username的输入框中

文本输入框

name为提交时的键

复选框

input-checkbox 为复选框，可以多选，多个checkbox具有相同的name和不同的value

单选框

input-radio 为单选按钮组，是互斥的，只能选择其中一个，多个radio具有相同的name，不同的value

文件上传控件

input-file 为文件上传控件

下拉列表

select+option为下拉列表，从多个选项中选择一个

文本域

textarea为文本域，输入大段内容

隐藏键值

input-hidden为隐藏键值，用户看不到，用于向后台交互一些特殊内容，其值可以是js动态修改的

提交和重置

普通按钮

<h3>用户注册</h3>
<!--action为要提交到的后台地址-->
<!--post为提交方式，通常都是post方式，否则注册信息将暴露在浏览器地址栏中-->
<form action="http://wwww.163.com" method="post">

    <div>
        <!--for点击时自动对焦到id为username的输入框中-->
        <label for="username">用户名：</label>
        <!--文本输入框，name为提交时的键-->
        <input type="text" name="username" id="username">
    </div>

    <br>

    <div>
        <label for="pwd">密码：</label>
        <!--密码输入框，name为提交时的键-->
        <input type="password" name="pwd" id="pwd">
    </div>

    <br>

    <div>
        <label>性别：</label>
        <!--input-radio为单选按钮组，是互斥的，只能选择其中一个，多个radio具有相同的name，不同的value-->
        <input type="radio" name="gender" id="male" value="0"><label for="male">男</label>
        <input type="radio" name="gender" id="female" value="1"> <label for="female">女</label>
    </div>
    <br>

    <div>
        <label>爱好：</label>
        <!--input-checkbox为复选框，可以多选，多个checkbox具有相同的name和不同的value-->
        <input type="checkbox" name="like" value="game" id="game"> <label for="game">打游戏</label>
        <input type="checkbox" name="like" value="shopping"> 逛街
        <input type="checkbox" name="like" value="sleep"> 睡觉
    </div>
    <br>

    <div>
        <label>个人照片</label>
        <!--input-file为文件上传控件-->
        <input type="file" name="photo">
    </div>
    <br>

    <div>
        <label>籍贯：</label>
        <!--select+option为下拉列表，从多个选项中选择一个-->
        <!--籍贯的key为site-->
        <select name="site">
            <!--籍贯的值为0123之一,对应不同的城市-->
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </div>
    <br>

    <div>
        <label>个人描述：</label>
        <!--textarea为文本域，输入大段内容-->
        <textarea name="info"></textarea>
    </div>
    <br>

    <!--input-hidden为隐藏键值，用户看不到，用于向后台交互一些特殊内容，其值可以是js动态修改的-->
    <input type="hidden" name="hid" value="10000">

    <!--提交和重置-->
    <input type="submit" value="提交">
    <input type="reset" value="重置">

    <!--普通按钮类型-->
    <input type="button" value="按钮">


</form>