表单示例 - HTML

本文将介绍HTML中常见的表单示例，并提供相应的代码片段以供参考。

文本输入框

<input type="text" name="username" placeholder="请输入用户名" />

上述代码将生成一个文本输入框，用于输入用户名。可以在name属性中指定输入框的名称，方便后端处理。

密码输入框

<input type="password" name="password" placeholder="请输入密码" />

上述代码将生成一个密码输入框，用于输入密码。与文本输入框类似，可以指定name属性。

单选框

<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女

上述代码将生成两个单选框，用于选择性别。需要给每个单选框都指定相同的name属性，同时value属性可用于后端处理。

复选框

<input type="checkbox" name="hobby" value="reading" /> 阅读
<input type="checkbox" name="hobby" value="music" /> 音乐

上述代码将生成两个复选框，用于选择兴趣爱好。类似单选框，需要指定相同的name属性和value属性。

下拉菜单

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>

上述代码将生成一个下拉菜单，用于选择城市。可以自定义name属性和每个选项的value属性和显示文本。

文本域

<textarea name="comment" rows="4" cols="50"></textarea>

上述代码将生成一个文本域，用于输入多行文本。可以设置name属性，以及行数rows和列数cols。

提交按钮

<input type="submit" value="提交" />

上述代码将生成一个提交按钮，用于提交表单数据。

示范场景

用户注册表单

<form action="/register" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required /><br>

  <label for="email">邮箱地址:</label>
  <input type="email" id="email" name="email" required /><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required /><br>

  <label for="confirm_password">确认密码:</label>
  <input type="password" id="confirm_password" name="confirm_password" required /><br>

  <input type="submit" value="注册" />
</form>

上述代码展示了一个用户注册表单的示例，包括用户名、邮箱地址、密码和确认密码的输入。

调查问卷表单

<form action="/survey" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required /><br>

  <label for="gender">性别:</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><br>

  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" required min="1" max="99" /><br>

  <label for="city">城市:</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select><br>

  <label for="comment">备注:</label>
  <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br>

  <input type="submit" value="提交" />
</form>

上述代码展示了一个调查问卷表单的示例，包括姓名、性别、年龄、城市和备注的输入。

以上是一些常见的HTML表单示例，希望对你有所帮助。你可以根据自己的需要进行相应的修改和扩展。请注意格式化和验证表单数据以确保安全性和数据的完整性。