今日学习内容:
第一天 | 第二天 | 第三天 | 第四天 | 第五天 | |
所花时间(小时) | 4 | 4.5 | |||
代码量(行) | 200 | 500 | |||
博客量(篇) | 1 | 1 | |||
了解到的知识点 | html表单 | html表单属性 |
HTML <form>
元素的不同属性。
Action 属性
action
属性定义提交表单时要执行的操作。
通常,当用户单击“提交”按钮时,表单数据将发送到服务器上的文件中。
在下面的例子中,表单数据被发送到名为 "action_page.php" 的文件。该文件包含处理表单数据的服务器端脚本:
实例
提交后,将表单数据发送到 "action_page.php":
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Bill"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Gates"><br><br> <input type="submit" value="Submit"> </form>
提示:如果省略 action 属性,则将 action 设置为当前页面。
Target 属性
target
属性规定提交表单后在何处显示响应。
target
属性可设置以下值之一:
值 | 描述 |
---|---|
_blank | 响应显示在新窗口或选项卡中。 |
_self | 响应显示在当前窗口中。 |
_parent | 响应显示在父框架中。 |
_top | 响应显示在窗口的整个 body 中。 |
framename | 响应显示在命名的 iframe 中。 |
默认值为 _self
,这意味着响应将在当前窗口中打开。
实例
此处,提交的结果将在新的浏览器标签中打开:
<form action="/action_page.php" target="_blank">
Method 属性
method 属性指定提交表单数据时要使用的 HTTP 方法。
表单数据可以作为 URL 变量(使用 method="get"
)或作为 HTTP post 事务(使用 method="post"
)发送。
提交表单数据时,默认的 HTTP 方法是 GET。
实例
此例在提交表单数据时使用 GET 方法:
<form action="/action_page.php" method="get">
实例
此例在提交表单数据时使用 POST 方法:
<form action="/action_page.php" method="post">
关于 GET 的注意事项:
- 以名称/值对的形式将表单数据追加到 URL
- 永远不要使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!)
- URL 的长度受到限制(2048 个字符)
- 对于用户希望将结果添加为书签的表单提交很有用
- GET 适用于非安全数据,例如 Google 中的查询字符串
关于 POST 的注意事项:
- 将表单数据附加在 HTTP 请求的正文中(不在 URL 中显示提交的表单数据)
- POST 没有大小限制,可用于发送大量数据。
- 带有 POST 的表单提交无法添加书签
提示:如果表单数据包含敏感信息或个人信息,请务必使用 POST!
Autocomplete 属性
autocomplete
属性规定表单是否应打开自动完成功能。
启用自动完成功能后,浏览器会根据用户之前输入的值自动填写值。
实例
启用自动填写的表单:
<form action="/action_page.php" autocomplete="on">
Novalidate 属性
novalidate
属性是一个布尔属性。
如果已设置,它规定提交时不应验证表单数据。
实例
未设置 novalidate 属性的表单:
<form action="/action_page.php" novalidate>
所有 <form> 属性的列表
属性 | 描述 |
---|---|
accept-charset | 规定用于表单提交的字符编码。 |
action | 规定提交表单时将表单数据发送到何处。 |
autocomplete | 规定表单是否应打开自动完成(填写)功能。 |
enctype | 规定将表单数据提交到服务器时应如何编码(仅供 method="post")。 |
method | 规定发送表单数据时要使用的 HTTP 方法。 |
name | 规定表单名称。 |
novalidate | 规定提交时不应验证表单。 |
rel | 规定链接资源和当前文档之间的关系。 |
target | 规定提交表单后在何处显示接收到的响应。 |