HTML表单

原创

抱怨是愚蠢的行为 2024-06-16 23:42:03 博主文章分类：HTML ©著作权

©著作权归作者所有：来自51CTO博客作者抱怨是愚蠢的行为的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML表单是用来收集用户输入数据的一个重要元素。通过表单，用户可以输入文本、选择选项、上传文件等，表单数据通常会被提交到服务器进行处理。以下是HTML表单的基础知识和常见元素：

表单结构

一个基本的HTML表单由<form>元素包裹，其中包含各种表单控件，如文本框、按钮等。以下是一个基本表单的示例：

<form action="/submit-form" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  
  <input type="submit" value="提交">
</form>

action：指定表单数据提交到的URL。
method：指定表单提交的HTTP方法，常用值为get和post。

常见的表单控件

1. 文本输入控件

单行文本输入：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

密码输入：

<label for="password">密码：</label>
<input type="password" id="password" name="password">

多行文本输入：

<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>

2. 按钮

提交按钮：

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

重置按钮：

<input type="reset" value="重置">

普通按钮：

<button type="button" onclick="alert('按钮被点击')">点击我</button>

3. 选择控件

单选按钮：

<label for="gender-male">男</label>
<input type="radio" id="gender-male" name="gender" value="male">

<label for="gender-female">女</label>
<input type="radio" id="gender-female" name="gender" value="female">

复选框：

<label for="subscribe">订阅新闻</label>
<input type="checkbox" id="subscribe" name="subscribe">

下拉菜单：

<label for="country">选择国家：</label>
<select id="country" name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
</select>

4. 文件上传

<label for="file">上传文件：</label>
<input type="file" id="file" name="file">

5. 隐藏字段

<input type="hidden" name="hiddenField" value="hiddenValue">

表单验证

HTML5 提供了多种表单验证功能，可以在不使用JavaScript的情况下进行基本的输入验证。

必填字段：

<input type="text" name="username" required>

输入模式：

<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">

输入类型：

<input type="email" name="email">
<input type="url" name="website">
<input type="number" name="age" min="1" max="100">
<input type="date" name="birthday">

提交表单

表单数据通常通过提交按钮提交到服务器进行处理。以下是一个简单的提交表单的示例：

<form action="/submit-form" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>

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

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