- 内容摘要:
- 介绍表单Forms 的属性和使用方法。
15.表单(Forms)
知识点:
-
HTML 表单是文档中的一个区域,相当于一个容器,此区域包含表单元素和表单提示信息。
-
表单元素是允许用户在表单中输入内容,表单将用户输入的信息发送到 Web 服务器。
-
表单元素比如:input 元素、复选框(checkbox)、单选框(radio-buttons)、文本域(textarea)、下拉列表(select) 等等。
-
如果不定义表单域,表单中的数据就无法传送到后台服务器。
-
结构图如下:
-
<form> 属性的列表
属性 值 描述 accept MIME_type HTML 5 中不支持。 accept-charset charset_list 规定服务器可处理的表单数据字符集。 action URL 规定当提交表单时向何处发送表单数据。 autocomplete on
off规定是否启用表单的自动完成功能。 enctype application/x-www-form-urlencoded
multipart/form-data
text/plain规定在发送表单数据之前如何对其进行编码。 method get
post规定用于发送 form-data 的 HTTP 方法。 name form_name 规定表单的名称。 novalidate novalidate 如果使用该属性,则提交表单时不进行验证。 rel external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search规定链接资源和当前文档之间的关系。 target _blank
_self
_parent
_top
framename规定在何处打开 action URL。 - 属性运用案例
<!DOCTYPE html> <html> <body> <form action="test.php" method="GET"> <h4>这是一个基础的使用的案例</h4> First name:<input type="text" name="firstname" value="Mickey"> <br> Last name:<input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> 点submit 数据会被发往服务器的test.aspx页面 </form> <form action="test.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> <h4>这是一个已设置所有可能的属性的使用案例</h4> First name:<input type="text" name="firstname" value="Mickey"> <br> Last name:<input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> 点submit 数据会被发往服务器的test.aspx页面 </form> </body> </html>
- 属性运用案例
- 表单标签
标签 描述 <form> 供用户输入的表单 <input> 输入域或按钮,type 属性值有 text,password,radio,Checkboxes,Submit <textarea> 文本域 (一个多行的输入控件) <label> 文字标题 <fieldset> 一组相关的表单元素,并使用外框包含起来 <legend> <fieldset> 元素的标题 <select> 下拉选项列表 <optgroup> 下拉列表选项组 <option> 下拉列表中的选项 <button> 一个点击按钮 <datalist> 一个预先定义的输入控件选项列表 <output> 一个计算结果 -
表单标签运用实例
<!DOCTYPE html> <html> <body> <form id="inputForm"> <h4> input使用案例,type值不同,用途不同</h4> 文字:<input type="text" name="tname" value=""> <br> 密码:<input type="password" name="lastname" value=""> <br> 单选框:<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <br> 复选框<input type="checkbox" name="vehicle" value="Bike">自行车 <input type="checkbox" name="vehicle" value="Car">小汽车 <br> 提交按钮 <input type="submit" value="Submit"> <br><br> 点submit 数据会被发往服务器的test.aspx页面 </form> <form id="textareaForm"> <h4> textarea使用案例</h4> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </form> <form id="labelForm"> <h4> label使用案例</h4> <label for="name">文字:</label> <input type="text" name="name" value="请输入。。。"> </form> <form id="fieldsetForm" action="/test.aspx" target="_blank" method="get" autocomplete="on" novalidate> <h4> fieldset和legend使用案例</h4> <fieldset> <legend>Personal information:</legend> Name:<br> <input type="text" name="name" value=""> <br> Password:<br> <input type="password" name="password" value=""> <br><br> <input type="submit" value="Submit"> </fieldset> </form> <form id="selectForm" action="/test.aspx" target="_blank" method="get" autocomplete="on" novalidate> <h4> select和option使用案例</h4> <p>无预设值</p> <select name="city"> <option value="0">广州</option> <option value="1">上海</option> <option value="2">北京</option> <option value="3">深圳</option> </select> <p>有预设值</p> <select name="cars"> <option value="0">广州</option> <option value="1">上海</option> <option value="2" selected>北京</option> <option value="3">深圳</option> </select> </form> <form id="optgroupForm" action="/test.aspx" target="_blank" method="get" autocomplete="on" novalidate> <h4>select, optgroup,option组合使用案例</h4> <select> <optgroup label="蔬菜类"> <option value="白菜">白菜</option> <option value="包菜">包菜</option> </optgroup> <optgroup label="肉类"> <option value="猪肉">猪肉</option> <option value="鱼">鱼</option> </optgroup> </select> <h4>optgroup,option组合使用案例</h4> <optgroup label="蔬菜类"> <option value="白菜">白菜</option> <option value="包菜">包菜</option> </optgroup> <optgroup label="肉类"> <option value="猪肉">猪肉</option> <option value="鱼">鱼</option> </optgroup> </form> <form id="buttonForm" action="/test.aspx" target="_blank" method="get" autocomplete="on" novalidate> <h4> button使用案例</h4> <button type="button">提交</button> </form> <form id="datalistForm" action="/test.aspx" target="_blank" method="get" autocomplete="on" novalidate> <h4> datalist使用案例</h4> <input list="citys" name="city"> <datalist id="citys"> <option value="0">广州</option> <option value="1">上海</option> <option value="2">北京</option> <option value="3">深圳</option> </datalist> <input type="submit"> </form> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <h4> output使用案例</h4> 0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> <p><strong>注意:</strong> Edge 12及更早 IE 版本的浏览器不支持 output 元素。</p> </form> </body> </html>
-