HTML 表单-JavaScript中文网-JavaScript教程资源分享门户

HTML 表单是用来收集用户输入数据的一种方式，它提供了各种不同类型的表单元素，如文本框、复选框、单选按钮、下拉框等。在 web 开发中，表单是非常常见也非常重要的一部分，因为它可以让用户与网站进行交互，提交数据等。

创建表单

要创建一个表单，需要使用 <form> 标签来包裹表单元素。下面是一个简单的表单示例：

// www.javascriptcn.com code example
<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br><br>

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

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

在上面的示例中，我们创建了一个包含用户名和密码输入框以及提交按钮的表单。<label> 标签用来描述每个表单元素的用途，<input> 标签用来创建不同类型的输入框，type 属性指定了输入框的类型，如 text、password、submit 等。

表单元素

除了文本框和密码框外，HTML 还提供了一些其他类型的表单元素，比如：

复选框：<input type="checkbox">
单选按钮：<input type="radio">
下拉框：<select> 和 <option>
文本域：<textarea>

下面是一个包含上述表单元素的示例：

// www.javascriptcn.com code example
<form>
  <label for="fruit">选择你喜欢的水果：</label><br>
  <input type="checkbox" id="apple" name="fruit" value="apple">
  <label for="apple">苹果</label><br>
  <input type="checkbox" id="banana" name="fruit" value="banana">
  <label for="banana">香蕉</label><br>
  
  <br>
  
  <label for="gender">选择你的性别：</label><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br>
  
  <br>
  
  <label for="city">选择你所在的城市：</label><br>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select><br>
  
  <br>
  
  <label for="message">留言：</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
  
  <br>
  
  <input type="submit" value="提交">
</form>

在上面的示例中，我们使用了复选框、单选按钮、下拉框和文本域等不同类型的表单元素，用户可以根据自己的需求选择或输入相应的数据。

表单属性

除了表单元素本身的属性外，<form> 标签还可以接受一些属性，比如：

action：指定表单提交的 URL
method：指定提交表单的 HTTP 方法，通常为 GET 或 POST
enctype：指定表单数据的编码类型

下面是一个带有属性的表单示例：

<form action="/submit" method="post" enctype="multipart/form-data">
  <label for="file">选择文件：</label>
  <input type="file" id="file" name="file"><br><br>
  
  <input type="submit" value="上传">
</form>

在上面的示例中，我们指定了表单提交的 URL 为 /submit，提交方法为 POST，并且指定了表单数据的编码类型为 multipart/form-data，这样可以实现文件上传功能。

以上就是关于 HTML 表单的基本介绍，希望能帮助你更好地理解和使用表单元素。