HTML5+CSS3_5_表单标签

泠泠七弦上111

已于 2024-08-19 11:25:09 修改

阅读量107

点赞数 2

分类专栏： HTML5+CSS3 文章标签： html5 前端

于 2024-07-16 20:58:20 首次发布

本文链接：https://blog.csdn.net/2301_81057751/article/details/140476651

版权

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单标签</title>
</head>

<body>
  <form action="">
    文本框：<input type="text">
    <!-- 文本框一般用于用于输入单行文本 -->
    <hr>

    密码框：<input type="password" placeholder="请输入密码">
    <!-- placeholder可以显示提示信息，文本框、密码框、文本域都可以用 -->
    <hr>

    单选框<br>
    <input type="radio" name="gender" id="man" checked><label for="man">男</label>
    <label><input type="radio" name="gender">女</label>
    <!-- name属性可以给单选框分组，同一组只能只能选中一个单选框 -->
    <!-- checked默认选中 -->
    <!-- label标签可以增大点击范围，当点击男或者女这个字时，也可以选中单选框，
      第一种写法：label标签的for属性值和input标签的id属性值相同
      第二种写法：直接使用label标签包裹input标签和文字，就不需要属性 -->
    <hr>

    复选框<br>
    兴趣爱好：
    <input type="checkbox" checked>唱歌
    <input type="checkbox">跳舞
    <input type="checkbox">打球
    <!-- checked默认选中 -->
    <hr>

    上传文件：<input type="file" multiple>
    <!-- 默认情况下只能上传一个文件，添加multiple属性可以一次性上传多个文件 -->
    <hr>

    下拉菜单<br>
    城市：
    <select>
      <option>北京</option>
      <option>上海</option>
      <option selected>广州</option>
    </select>
    <!-- select默认选中 -->
    <hr>

    文本域：<textarea placeholder="请输入文字"></textarea>
    <!-- 可以输入多行文本 -->
    <hr>

    按钮<br>
    <button type="submit">提交按钮</button>
    <!-- 提交按钮：点击后提交数据到后台 -->
    <button type="reset">重置按钮</button>
    <!-- 重置按钮：点击后将form标签中包裹的所有表单标签恢复到默认值 -->
    <button type="button">普通按钮</button>
    <!-- 普通按钮：没有什么特殊功能，一般配合JavaScript使用 -->
  </form>
</body>

</html>