HTML 表单 HTML 表单 XHTML 属性 HTML 表单属性 HTML 表单用于搜集不同类型的用户输入。 <form> 素 HTML 表单用于收集用户输入。 <form> 素定义 HTML 表单: 实例 <form> . form elements . </form> HTML 表单包含表单素。 表单素指的是不同类型的 input 素、复选框、单选按钮、提交按钮等等。 <input> 素 <input> 素是最重要的表单素。 <input> 素有很多形态,根据不同的 type 属性。 这是本章中使用的类型: 类型 描述 text 定义常规文本输入。 radio 定义单选按钮输入(选择多个选择之一) submit 定义提交按钮(提交表单) 注释:您稍后将在本教程学到更多有关输入类型的知识。 文本输入 <input type=”text”> 定义用于文本输入的单行输入字段: 实例 <form> First name:<br> <input type=”text” name=”firstname”> <br> Last name:<br> <input type=”text” name=”lastname”> </form> 亲自试一试 在浏览器中看起来是这样的: First name: Last name: 注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。 单选按钮输入 <input type=”radio”> 定义单选按钮。 单选按钮允许用户在有限数量的选项中选择其中之一: 实例 <form> <input type=”radio” name=”sex” value=”male” checked>Male <br> <input type=”radio” name=”sex” value=”female”>Female </form> 亲自试一试 单选按钮在浏览器看起来是这样的: Male Female 提交按钮 <input type=”submit”> 定义用于向表单处理程序(form-handler)提交表单的按钮。 表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。 表单处理程序在表单的 action 属性中指定: 实例 <form action=”action_page.php”> First name:<br> <input type=”text” name=”firstname” value=”Mickey”> <br> Last name:<br> <input type=”text” name=”lastname” value=”Mouse”> <br><br> <input type=”submit” value=”Submit”> </form> 亲自试一试 在浏览器中看起来是这样的: First name: Last name: Action 属性 action 属性定义在提交表单时执行的动作。 向服务器提交表单的通常做法是使用提交按钮。 通常,表单会被提交到 web 服务器上的网页。 在上面的例子中,指定了某个服务器脚本来处理被提交表单: <form action=”action_page.php”> 如果省略 action 属性,则 action 会被设置为当前页面。 Method 属性 method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST): <form action=”action_page.php” method=”GET”> 或: <form action=”action_page.php” method=”POST”> 何时使用 GET? 您能够使用 GET(默认方法): 如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。 当您使用 GET 时,表单数据在页面地址栏中是可见的: action_page.php?firstname=Mickey&lastname=Mouse 注释:GET 最适合少量数据的提交。浏览器会设定容量限制。 何时使用 POST? 您应该使用 POST: 如果表单正在更新数据,或者包含敏感信息(例如密码)。 POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的。 Name 属性 如果要正确地被提交,每个输入字段必须设置一个 name 属性。 本例只会提交 “Last name” 输入字段: 实例 <form action=”action_page.php”> First name:<br> <input type=”text” value=”Mickey”> <br> Last name:<br> <input type=”text” name=”lastname” value=”Mouse”> <br><br> <input type=”submit” value=”Submit”> </form> 亲自试一试 用 <fieldset> 组合表单数据 <fieldset> 素组合表单中的相关数据 <legend> 素为 <fieldset> 素定义标题。 实例 <form action=”action_page.php”> <fieldset> <legend>Personal information:</legend> First name:<br> <input type=”text” name=”firstname” value=”Mickey”> <br> Last name:<br> <input type=”text” name=”lastname” value=”Mouse”> <br><br> <input type=”submit” value=”Submit”></fieldset> </form> 亲自试一试 以上 HTML 代码在浏览器中看起来是这样的: Personal information: First name: Last name: HTML Form 属性 HTML <form> 素,已设置所有可能的属性,是这样的: 实例 <form action=”action_page.php” method=”GET” target=”_blank” accept-charset=”UTF-8″ ectype=”application/x-www-form-urlencoded” autocomplete=”off” novalidate> . form elements . </form> 下面是 <form> 属性的列表: 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。 action 规定向何处提交表单的地址(URL)(提交页面)。 autocomplete 规定浏览器应该自动完成表单(默认:开启)。 enctype 规定被提交数据的编码(默认:url-encoded)。 method 规定在提交表单时所用的 HTTP 方法(默认:GET)。 name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标(默认:_self)。 注释:您将在下面的章节学到更多关于属性的知识。 XHTML 属性 HTML 表单属性
2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/39783.html