HTML 表单
- HTML表单基础:HTML表单通过
<form>
元素创建,用于收集用户输入并将其发送到服务器。 - 表单元素类型:表单包括多种用户交互元素,如文本输入框、单选按钮、下拉菜单、复选框等,用于获取不同类型的用户输入。
- 表单属性:
<form>
元素具有多个属性,包括action
(定义提交操作的URL)、method
(定义提交方法,如GET或POST)、target
(响应显示位置)等,控制表单数据的提交和处理。
HTML 表单是文档的一部分,用于收集用户输入。用户的输入通常被发送到服务器(Web 服务器、邮件客户端等)。我们使用 HTML 的 <form>
元素在 HTML 中创建表单。
示例:HTML 表单
HTML 的 <form>
元素用于创建 HTML 表单。例如,
<form>
<label for="firstname">名字: </label>
<input type="text" name="firstname" required />
<br />
<label for="lastname">姓氏: </label>
<input type="text" name="lastname" required />
<br />
<label for="email">电子邮件: </label>
<input type="email" name="email" required />
<br />
<label for="password">密码: </label>
<input type="password" name="password" required />
<br />
<input type="submit" value="登录!" />
</form>
浏览器输出
HTML 表单元素
表单包含用户用来发送输入的特殊交互元素。它们包括文本输入、文本区域字段、复选框、下拉菜单等。例如,
<form>
<label for="name">姓名:</label>
<input type="text" name="name" /><br /><br />
<label for="sex">性别:</label>
<input type="radio" name="sex" id="male" value="male" />
<label for="male">男</label>
<input type="radio" name="sex" id="female" value="female" />
<label for="female">女</label> <br /><br />
<label for="country">国家: </label>
<select name="country" id="country">
<option>选择一个选项</option>
<option value="nepal">尼泊尔</option>
<option value="usa">美国</option>
<option value="australia">澳大利亚</option></select
><br /><br />
<label for="message">留言:</label><br />
<textarea name="message" id="message" cols="30" rows="4"></textarea
><br /><br />
<input type="checkbox" name="newsletter" id="newsletter" />
<label for="newsletter">订阅?</label><br /><br />
<input type="submit" value="提交" />
</form>
浏览器输出
要了解更多关于各种表单控件的信息,请访问 HTML 表单输入。
表单属性
HTML <form>
元素包含几个用于控制数据提交的属性。它们如下:
action
action
属性定义了提交表单时要执行的操作。它通常是表单数据要发送到的服务器的 url。
<form action="/login">
<label for="email">电子邮件:</label>
<input type="email" name="email" /><br /><br />
<label for="password">密码:</label>
<input type="password" name="password" /><br /><br />
<input type="submit" value="提交" />
</form>
在上面的示例中,当表单提交时,表单中的数据将被发送到 /login
。
method
method
属性定义了提交表单时要使用的 HTTP 方法。method
属性有 3 个可能的值:
- post - 用于将数据发送到服务器以更新资源。
<form method="post">...</form>
- get:用于从指定资源请求数据。
<form method="get">...</form>
- dialog:当表单位于
<dialog>
元素内时使用此方法。使用此方法将关闭对话框并发送表单提交事件。
要了解更多关于 HTTP 方法 GET 和 POST,请访问 HTML 表单动作:POST 和 GET。
target
它指定了提交表单后接收到的响应要显示的位置。与 <a>
标签中的 target
属性类似,target
属性有四个可能的值。
- _self(默认):将响应加载到相同的浏览器标签页中。
<form target="_self">
<label for="firstname">输入您的名字:</label>
<input type="text" name="firstname" />
</form>
- _blank:将响应加载到一个新的浏览器标签页中。
<form target="_blank">
<label for="firstname">输入您的名字:</label>
<input type="text" name="firstname" />
</form>
- _parent:加载到当前的父框架中。如果没有父框架,它将响应加载到相同的标签页中。
<form target="_parent">
<label for="firstname">输入您的名字:</label>
<input type="text" name="firstname" />
</form>
- _top:将响应加载到顶级框架中。如果没有父框架,它将响应加载到相同的标签页中。
<form target="_top">
<label for="firstname">输入您的名字:</label>
<input type="text" name="firstname" />
</form>
enctype
它指定了表单数据应该如何为请求进行编码。它仅适用于我们使用 POST 方法。
<form method="post" enctype="application/x-www-form-urlencoded"></form>
在上面的示例中,表单数据将以 x-www-form-urlencoded 格式编码(这是默认的编码格式)。
name
它指定了表单的名称。name
在 Javascript 中用于引用或访问此表单。
<form name="login_form">
<label for="email">电子邮件:</label>
<input type="email" name="email" /><br /><br />
<label for="password">密码:</label>
<input type="password" name="password" /><br /><br />
<input type="submit" value="提交" />
</form>
上面的表单可以在 javascript 中这样访问:
document.forms['login_form']
尽管可以使用 name 在 javascript 中访问表单元素,但建议使用 id
来访问表单元素。
novalidate
如果设置了 novalidate
属性,则会跳过表单元素中的所有验证。
<form novalidate>
<label for="email">输入您的电子邮件:</label>
<input
type="email"
id="email"
name="email
"
/><br /><br />
<input type="submit" />
</form>
在上面的示例中,即使我们输入了 email
字段的无效值(例如 Hi
),表单也会被提交。