HTML中的表单及其用途

HTML表单是一种常用的交互方式，用于向服务器提交数据。表单由输入控件和提交按钮组成。本文将介绍如何在HTML文档中创建表单，并提供一些示例。 ## 基本用法 要创建一个简单的表单，请使用<form>标签，并指定action和method属性。 ```html <form action="/submit" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="提交"> </form> ``` - action属性用于指定表单数据提交的URL。 - method属性用于指定HTTP请求的方法，可以是GET或POST。 ## 输入控件 表单中可以包含各种类型的输入控件，包括文本框、复选框、单选按钮、下拉列表等。 ```html <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><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><br> <label for="interests">兴趣:</label> <select id="interests" name="interests"> <option value="">请选择</option> <option value="sports">体育</option> <option value="music">音乐</option> <option value="reading">阅读</option> </select><br><br> <label for="agree">同意协议:</label> <input type="checkbox" id="agree" name="agree"><br><br> <input type="submit" value="提交"> </form> ``` - <input>标签用于创建各种类型的输入控件。 - type属性用于指定输入控件的类型，如text、email、password、radio、checkbox等。 - <select>标签用于创建下拉列表。 - <option>标签用于定义下拉列表中的选项。 ## 标签 可以使用<label>标签来关联输入控件和标签。 ```html <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="提交"> </form> ``` - for属性用于指定关联的输入控件的id值。

HTML表单是一种常用的交互方式，用于向服务器提交数据。表单由输入控件和提交按钮组成。本文将介绍如何在HTML文档中创建表单，并提供一些示例。 ## 基本用法 要创建一个简单的表单，请使用<form>标签，并指定action和method属性。 ```html <form action="/submit" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="提交"> </form> ``` - action属性用于指定表单数据提交的URL。 - method属性用于指定HTTP请求的方法，可以是GET或POST。 ## 输入控件 表单中可以包含各种类型的输入控件，包括文本框、复选框、单选按钮、下拉列表等。 ```html <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><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><br> <label for="interests">兴趣:</label> <select id="interests" name="interests"> <option value="">请选择</option> <option value="sports">体育</option> <option value="music">音乐</option> <option value="reading">阅读</option> </select><br><br> <label for="agree">同意协议:</label> <input type="checkbox" id="agree" name="agree"><br><br> <input type="submit" value="提交"> </form> ``` - <input>标签用于创建各种类型的输入控件。 - type属性用于指定输入控件的类型，如text、email、password、radio、checkbox等。 - <select>标签用于创建下拉列表。 - <option>标签用于定义下拉列表中的选项。 ## 标签 可以使用<label>标签来关联输入控件和标签。 ```html <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="提交"> </form> ``` - for属性用于指定关联的输入控件的id值。