跳到主要内容

表单练习

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单练习</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form>
    <h2>注册表单</h2>

    <!-- 文本输入 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名">

    <!-- 密码 -->
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" placeholder="请输入密码">

    <!-- 单选按钮 -->
    <label>性别：</label>
    <input type="radio" id="male" name="gender" value="male" class="inline">
    <label for="male" class="inline">男</label>
    <input type="radio" id="female" name="gender" value="female" class="inline">
    <label for="female" class="inline">女</label>

    <!-- 多选框 -->
    <label>兴趣：</label>
    <input type="checkbox" id="coding" name="hobby" value="coding" class="inline">
    <label for="coding" class="inline">编程</label>
    <input type="checkbox" id="music" name="hobby" value="music" class="inline">
    <label for="music" class="inline">音乐</label>
    <input type="checkbox" id="sports" name="hobby" value="sports" class="inline">
    <label for="sports" class="inline">运动</label>

    <!-- 下拉框 -->
    <label for="city">城市：</label>
    <select id="city" name="city">
      <option value="">请选择</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
    </select>

    <!-- 文本域 -->
    <label for="about">自我介绍：</label>
    <textarea id="about" name="about" rows="4" placeholder="写点什么..."></textarea>

    <!-- 提交按钮 -->
    <button type="submit">提交</button>
  </form>
</body>
</html>

最后于 更新