HTML表单(form)是一种用于收集用户输入的HTML元素集合。一个典型的HTML表单包含以下部分:
<form>
标签:这是表单的容器,它定义了表单的属性,如action
(提交地址)、method
(提交方式,通常是GET或POST)等。
<form action="/submit" method="post">
<input>
标签:这是表单中最重要的元素,用于接收用户的输入。它可以有多种类型,如text
、password
、checkbox
、radio
、submit
、reset
和button
等。type="text"
:文本输入框。type="password"
:密码输入框,输入内容会被隐藏。type="checkbox"
:复选框,允许用户选择多个选项。type="radio"
:单选按钮,通常用于一组选项中选择一个。type="submit"
:提交按钮,用于提交表单数据。type="reset"
:重置按钮,用于清除表单中的所有输入。type="button"
:普通按钮,可以自定义行为。
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="checkbox" name="subscribe" value="yes"> Subscribe
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="submit" value="Submit">
<label>
标签:用于为表单元素提供描述性文本。它与<input>
元素关联,提高可访问性。
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<select>
标签:用于创建下拉列表,让用户从预定义的选项中选择一个。
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<textarea>
标签:用于多行文本输入。
<textarea name="message" rows="4" cols="50"></textarea>
<button>
标签:除了<input type="submit">
之外,还可以使用<button>
标签创建自定义按钮。
<button type="button" onclick="alert('Hello!')">Click me</button>
<div>
和<span>
标签:用于对表单元素进行分组和布局,但它们本身不是表单的一部分。
请注意,这些元素可以组合使用,以创建复杂的表单结构。在实际应用中,还需要考虑其他因素,如表单验证、响应式设计等。