目录
- 1 form表单概述
- 2 表单属性
- 2.1 Action 属性
- 2.2 Target 属性
- 2.3 Method 属性
- 2.4 enctype 属性
- 2.5 name 属性
- 2.6 Autocomplete 属性
- 2.7 Novalidate 属性
- 3 表单元素
- 3.1 input元素
- 3.2 select元素和option元素
- 3.3 textarea元素
- 3.4 button元素
- 3.5 optgroup元素
- 3.6 fieldset元素与legend元素
- 3.7 datalist元素
- 4 总结
- 参考文献
1 form表单概述
- 作用:用于搜集不同类型的用户输入。
- 应用场合:搜索框、登录框、文件上传、注册、留言板等。
- 定义标签:
<form></form>
2 表单属性
2.1 Action 属性
- 背景:通常,当用户单击“提交”按钮时,表单数据将发送到服务器上的文件中。
- 作用:规定当提交表单时向何处发送表单数据。action 默认值为当前页面。
- 语法:
<form action="URL"></form>
。 - 关于URL值:
- 默认值为当前页面。
- 绝对 URL:指向另一个网站(比如 action=“http://www.example/example.htm”)。
- 相对 URL:指向网站内的一个文件(比如 action=“example.htm”)。
2.2 Target 属性
- 背景:当我们提交表单后,一般会得到对应的响应。
- 作用:规定一个关键词,指示在何处显示提交表单后接收到的响应。
- 语法:
<form target=" _blank | _self | _parent | _top | framename ">
- 关于target几种属性的含义:
- _blank:在新窗口/选项卡中打开。
- _self:在同一框架中打开。(默认)
- _parent:在父框架中打开。
- _top:在整个窗口中打开。
- framename:在指定的 iframe 中打开。
- 在网站https://www.runoob/try/try.php?filename=tryhtml_form_target练习不同target的响应方式,以加深理解。
2.3 Method 属性
- 作用:指定提交表单数据时要使用的 HTTP 方法。
- 使用get方式(默认)语法:
<form action="/action_page.php" method="get">
使用post方式语法:<form action="/action_page.php" method="post">
- 两种方法的一个明显区别是,get提交的参数在浏览器的地址栏中可见,而post则不可见。如果表单数据包含敏感信息或个人信息,请务必使用 POST!
- 关于 GET 的注意事项:
- 以名称/值对的形式将表单数据追加到 URL
- 永远不要使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!)
- URL 的长度受到限制(2048 个字符)
- 对于用户希望将结果添加为书签的表单提交很有用
- GET 适用于非安全数据,例如 Google 中的查询字符串
- 关于 POST 的注意事项:
- 将表单数据附加在 HTTP 请求的正文中(不在 URL 中显示提交的表单数据)
- POST 没有大小限制,可用于发送大量数据。
- 带有 POST 的表单提交无法添加书签
2.4 enctype 属性
- 注意:只有 method=“post” 时才使用 enctype 属性。
- 作用:规定在将表单数据发送到服务器之前如何对其进行编码。
- 语法:
<form enctype="value">
- 属性值:
- application/x-www-form-urlencoded:在发送前编码所有字符(默认)。
- multipart/form-data:不对字符编码;在使用包含文件上传控件的表单时,必须使用该值。
- text/plain:空格转换为 “+” 加号,但不对特殊字符编码。
2.5 name 属性
- 作用:规定表单的名称。name属性用于在JavaScript中引用元素,或者在表单提交之后引用表单数据。
- 语法:
<form name="text">
2.6 Autocomplete 属性
- 作用:设定表单是否应打开自动完成功能,启用自动完成功能后,浏览器会根据用户之前输入的值自动填写值。部分浏览器不支持。
- 语法:
<form action="/action_page.php" autocomplete="on | off">
- 属性值及含义:
- on:默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。
- off:规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中,浏览器不会自动完成输入。
- 在网站https://www.runoob/try/try.php?filename=tryhtml5_form_autocomplete尝试不同属性值的输入方法,在搜狗浏览器体现不错差别,在360浏览器可以体现出。
2.7 Novalidate 属性
- 作用:novalidate 属性规定当提交表单时不对表单数据(输入)进行验证。
- 属性:novalidate 属性是一个布尔属性。
- 语法:
<form action="/action_page.php" novalidate>
3 表单元素
3.1 input元素
- 作用:元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变,取决于 type 属性。
- 注意:该元素是单标签。
- 常用属性:
- name属性:类型为text,该属性规定元素的名称。
- pattern属性:类型为regexp,该属性用于设定验证元素值的正则表达式。
- size属性:类型为number,该属性规定以字符数计的元素的可见宽度。
- type属性:该属性设定要显示的元素的类型。
- 更多属性参考网址:《HTML<input>标签》
- 利用菜鸟在线编辑器尝试不同type值的应用结果。先清空源代码,然后复制黏贴代码并点击运行。
<form>
<!--尝试输入,文字显示为明文。-->
账号:<input type="text" name="fname"><br >
<!--尝试输入,文字显示为密文。-->
密码:<input type="password" name="passwd"><br >
<!--#显示为按钮。-->
按钮:<input type="button" name="button"><br >
<!--# 单选。-->
性别:<input type="radio" name="sex">男<input type="radio" name="sex">女<br >
<!--# 多选-->
爱好:<input type="checkbox" name="ah1">吃饭
<input type="checkbox" name="ah2">睡觉
<input type="checkbox" name="ah3">打游戏
</form>
3.2 select元素和option元素
- 作用:<select>元素用来创建下拉列表。\ <option> 标签定义了列表中的可用选项。
- <select> 元素常用属性:
- 语法:
<select name="text" multiple size="number">
。 - name属性:规定下拉列表的名称。
- multiple属性:类型为布尔属性。设定可同时选择多个选项。
- size属性:规定下拉列表中可见选项的数目。默认值是 1。如果使用了 multiple 属性,默认值是 4。
- 其他属性参考《HTML<select>标签》
- 语法:
- <option>元素常用属性:
- 语法:
<option value="value" disabled selected>
- disabled属性:类型为布尔属性,用于禁用某个选项。可以设置 disabled 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该选项的使用。
- selected属性:类型为布尔属性,设置默认预选项,被预选的选项会显示在下拉列表最前面的位置。
- value属性:规定在表单被提交时被发送到服务器的值。
- 其他属性参考《HTML<option>标签》
- 语法:
- 在网站菜鸟在线编辑器练习不同属性的作用。
3.3 textarea元素
- 作用:定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
- 注意:可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。
- 语法:
<textarea name="text" maxlength="number" >
- <textarea> 元素常用属性:
- name属性:为文本区域规定名称。用于在JavaScript中对元素进行引用,或者在表单提交之后,对表单数据进行引用。
- maxlength属性:规定文本区域的最大长度(以字符计)。
- required属性:类型为布尔属性。规定一个文本区域是必需的/必须填写(以提交表单)。
- 其他属性参考《HTML<textarea>标签》
- 在网站菜鸟在线编辑器练习不同属性的作用。
3.4 button元素
- 作用:定义一个按钮。
- 注意:不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮,以便在表单中使用时能够提交不同的值。
- 对比:在<button>元素内部,可以放置内容,比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。
- 语法:
<button name="name" type="type" value="value">
- 常用属性:
- name属性:为按钮规定名称。
- type属性:规定按钮的类型。type = button为普通按钮,reset为重置按钮,submit为提交按钮。
- value属性:按钮的初始值。
- 重置form表单属性:可以利用button属性覆盖form属性,如action、method等
- 其他属性参考《HTML <button> 标签》
- 在网站菜鸟在线编辑器练习不同属性的作用。
3.5 optgroup元素
- 作用:选项组规定描述标签。
- 应用场合:应用于select之下option之上。
- 语法:
<optgroup label="text" disabled>
- 属性:.
- disabled属性:类型为布尔属性,表示选项组被禁用。
- label属性:为选项组规定描述标签。
- 在网站菜鸟在线编辑器练习不同属性的作用。
3.6 fieldset元素与legend元素
- 作用:<fieldset>元素将表单内的相关元素分组,会在相关表单元素周围绘制边框。<legend>元素定义标题内容与位置。
- 语法:
<fieldset disabled name = "name">
<legend align="left|right|top|bottom">Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
- <fieldset>元素属性:
- disabled属性:类型为布尔属性。禁用一组表单元素(一个 fieldset)。
- name属性:规定 fieldset 的名称。用于在 JavaScript 中引用元素,或者在表单提交之后引用表单数据。
- 其他属性参考《HTML<fieldset>标签》
- <legend>元素属性:
- align属性:设置对其位置。
- HTML5 不支持 <legend> align 属性。请使用 CSS 代替。
- 在网站菜鸟在线编辑器练习不同属性的作用。
3.7 datalist元素
- 作用:规定了<input>元素可能的选项列表。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。
- 应用场合:应用于<input>元素下.
- 语法:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
- 在网站菜鸟在线编辑器练习该元素。
4 总结
- 掌握form表单的作用:提交数据。
- 掌握form表单7种常用属性的作用与语法。
- 掌握form表单9种常用元素的作用与语法。
参考文献
- 《菜鸟教程HTML <form> 》
- 《HTML 表单属性》
- 《HTML表单元素》
更多推荐
【HTML基础】form表单常用的7种属性和9种元素详解(含在线练习网址)
发布评论