HTML前端开发入门之表单标签/labei标签/datalist标签

最新推荐文章于 2025-06-14 17:18:21 发布

原创最新推荐文章于 2025-06-14 17:18:21 发布 · 767 阅读

0 ·

CC 4.0 BY-SA版权

从零玩转Html5前端开发专栏收录该内容

56 篇文章

订阅专栏

本文介绍了HTML前端开发中的表单标签，包括input、select、textarea等，详细讲解了各元素的功能、用法及注意事项。接着深入探讨了Label标签，解释了如何通过Label绑定输入框实现文字点击聚焦。最后，文章提到了Datalist标签，它是为输入框提供待选项的一种方式，虽然浏览器支持度有限，但依然值得了解。

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

##表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>


<form action="">
    
    账号：<input type="text">
    
    <br>
    密码：<input type="password">
    
    <br>
    账号：<input type="text" value="邮箱/电话/账号"><br>
    密码：<input type="password" value="123">
    <br>
    
    性别：
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender" checked="checked">保密
    <br>
    爱好：
    <input type="checkbox">足球
    <input type="checkbox">棒球
    <input type="checkbox" checked="checked">篮球
    <input type="checkbox" checked="checked">学习
</form>

<form action="http://www.baidu.com">
    
    <input type="button" value="我是按钮">

    
    <input type="image" src="images/领取红包按钮.png"><br>

    
    账号：<input type="text" name="aa">
    <br>
    密码：<input type="password" name="bb">
    <input type="reset" value="清空">

    
    <input type="submit" value="登陆">

    
    <input type="hidden" value="666">
</form>

<select>
    <option>武汉</option>
    <option>西安</option>
    <option>杭州</option>
    <option selected="selected">成都</option>
</select>

<select>
    <optgroup label="武汉"></optgroup>
        <option>江夏区</option>
        <option>武昌区</option>
        <option>汉阳区</option>
    <optgroup label="游戏"
        <option>荒野行动</option>
        <option>刺激战场</option>
        <option>穿越火线</option>
</select>

<textarea cols="2" rows="5">
</textarea>

</body>
</html>