您的位置:时时app平台注册网站 > web前端 > 简言之form规范化实例——语义结构【彩世界网址

简言之form规范化实例——语义结构【彩世界网址

2019-10-12 18:31

表单元素 开篇

2016/01/19 · HTML5 · 表单

原文出处: 司徒正美(@司徒正美)   

今天开始讲述表单这个重要模块

可以说,JS 最早是为表单而发明的, 因此在没有JS之前,所有操作都需要提交后端验证,发现有误再重定向回原页面,
加上之前1,2KB的网速,这用户体验真是奇差无比.因此JS最初发明出来,就是做表单验证的.

围绕表单,添加了各种语义化的元素,事件,属性.

比如说label,在某个radio外围上它,既能说明它是什么东西,也能扩大点击范围

比如说fieldset,它拥有默认的框框,方便圈定某个区域,表明这里面的东西是表单(form本身默认不可见,
而CSS要在稍晚的时候才发明出来)

比如说, onchange, oninput, onsubmit等事件,提交与用户交互的友好度

比如说, readOnly, disabled, checked, 为表单元素增加各种状态.

我们可以给一个定义,何谓表单元素 ?就是能向后端提供数据的元素

而这些元素通过都放在form元素中,但如果将它们单个拎出来,这个不好判定,我们还可以通过其他”外观”特征获得,就是它们的tagName都是input, button, select, textarea.其实option元素也算是表单元素,但它的数据需要提交到select 元素 进行过滤,才能提交

JavaScript

function isFormElement(el){ return /input|button|select|textarea/i.test(el.tagName) }

1
2
3
function isFormElement(el){
   return /input|button|select|textarea/i.test(el.tagName)
}

在HTML5中,还添加类似datalist, output等元素, 但它们只是辅助设施,没有直接给form提交数据的能力,因此不算是表单元素.

form元素作为AJAX出现前唯一的提交通道,我们在这里着重说一下

它上面拥有如下属性                          

属性 描述
accept MIME_type  规定通过文件上传来提交的文件的类型
accept-charset charset 服务器处理表单数据所接受的字符集
enctype MIME_type 规定表单数据在发送到服务器之前应该如何编码
method get/post 规定表单数据发送的方式,get方法和post方法
name name 规定表单的名称
target _blank/_parent/_self/_top 规定在何处打开action URL

其中三个重要属性说明一下:

1、action指定该表单发送时接受操作的地址

2、method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送。post则是在HTTP请求中发送。

3、enctype指定表单数据在发送的服务器之前如何编码,特别注意的是,当含有上传域时要设置编码方式为enctype=”multipart/form-data”,否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,form里面的input的值以2进制的方式传过去。才能完整的传递文件数据。FTP上传大文件的时候,也有个选项是以二进制方式上传。

彩世界网址 1

表单里面的元素布置有一定的要求,如form里面一定放着fieldset, fielset里面包着legend, label包着说明文字与input, textearea…., label里要指定tabindex,就是tab切换的顺序。

XHTML

<form> <fieldset> <legend>health information</legend> <label tabindex="1">height: <input type="text"></label> <label tabindex="2">weight: <input type="text"></label> </fieldset> </form>

1
2
3
4
5
6
7
<form>
  <fieldset>
    <legend>health information</legend>
    <label tabindex="1">height: <input type="text"></label>
    <label tabindex="2">weight: <input type="text"></label>
  </fieldset>
</form>

不同的表单拥有不同的外形,它们的用法也各有不同,序列化数据也不一样,因此我们将分开以下几种细细讨论.

输入系, 选择系, 下拉系, 搭车系, 图形系

1 赞 8 收藏 评论

彩世界网址 2

Interest:

一、表单

First name:

2. 表单定义(<form></form>标签)

HTML表单是一个包含表单元素的区域, 表单使用<form> 标签创建。表单能够包含 <a target="_blank" title="HTML input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含<a target="_blank" title="HTML menus、<a target="_blank" title="HTML textarea、<a target="_blank" title="HTML fieldset、<a target="_blank" title="HTML legend 和 <a target="_blank" title="HTML label 元素。注意,<form >元素是块级元素,其前后会产生折行。

  1. <form action="reg.ashx" method="post">
2. <!--表单元素在这里-->
3. </form>

Basic Register

1. 表单的作用

HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。

fieldset:对表单进行分组,一个表单可以有多个fieldset
legend:说明每组的内容描述

二、 表单元素

  • 单行文本框<input type="text"/>(input 的type 属性的默认值就是"text")

<input type="text" name="名称">

以下是单行文本框的主要属性:
 size:指定文本框的宽度,以字符个数为单位;在大多数浏览器中,文本框的缺省宽度是20个字符。
 value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击<input type="reset"/>按钮之后在文本框中显示的值。
 maxlength:指定用户输入的最大字符长度。
 readonly:只读属性,当设置readonly属性后,文本框可以获得焦点,但用户不能改变文本框中的value。
 disabled:禁用,当文本框被禁用时,不能获得焦点,当然,用户也不能改变文本框的值。并且在提交表单时,浏览器不会将该文本框的值发送给服务器。

  • 密码框<input type="password"/>

<input type="password" name="名称">

  • 单选按钮<input type="radio"/>
      使用方式:使用name相同的一组单选按钮,不同radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独的判断。单选按钮的元素值由value属性显式设置,表单提交时,选中项的value和name被打包发送,不显式设置value。

<input type=“radio” name=“gender” value=“male”/>
<input type=“radio” name=“gender” value=“female”/>

  • 复选框<input type="checkbox"/>

使用复选按钮组,即name相同的一组复选按钮,复选按钮表单元素的元素值由value属性显式设置,表达提交时,所有选中项的value和name被打包发送

不显式设置value。复选框的checked属性表示是否被选中,<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推荐)checked、readonly等这种一个可选值的属性都可以省略属性值。

<input type =“checkbox” name=“language” value=“Java”/>
<input type =“checkbox” name=“language” value=“C”/>
<input type =“checkbox” name=“language” value=“C#”/>

  • 隐藏域<input type="hidden"/>

隐藏域通常用于向服务器提交不需要显示给用户的信息。

<input type=“hidden” name=“隐藏域”/>

  • 文件上传<input type="file"/>

使用file,则form的enctype必须设置为multipart/form-data,method属性为POST。

<input name="uploadedFile" id="uploadedFile" type="file" size="60" accept="text/*"/>

  • 下拉框<select>标签

<select>标记创建一个列表框,<option>标记创建一个列表项,<select>与嵌套的<option>一起使用,共同提供在一组选项中进行选择的方式。
  将一个option设置为选中:<option selected>北京</option>或者<option selected="selected">北京</option>(推荐方式)就可以将这个项设定为选择项。如何实现“不选择”,添加一个<option value="-1">--不选择--<option>,然后编程判断select选中的值如果是-1就认为是不选择。
  select分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都适用。  
  <select>标记加上multiple属性,可以允许多选(按CTRL键选择)

彩世界网址 3

select.jpg

  • 多行文本<textarea></textarea>
    多行文本<textarea>创建一个可输入多行文本的文本框,<textarea>没有value属性,<textarea>文本</textarea>,cols=“50”、rows=“15”属性表示行数和列数,不指定则浏览器采取默认显示。
  1. <textarea name=“textareaContent” rows=“ 20“ cols=“50” >
  1. 多行文本框的初始显示内容 3 </textarea>
  • <label></label>标签
    在<input type=“text”>前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修饰的控件的id,<label for=“txt1” >内容</label>;”,然后按下alt u(了解)。accesskey=“u“,label的另一个属性。注意:要为被修饰的控件设置一个唯一的id。我觉得<label></label>标签对<input type="radio"/>和<inputtype="checkbox"/>这两个标签是非常有用的。
  1. <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable>
  2. <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label>
  3. <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label>
  • <fieldset></fieldset>标签
    fieldset标签将控件划分一个区域,看起来更规整。
    1<fieldset>
    2 <legend>爱好</legend>
    3 <input type="checkbox" value="篮球" />
    4 <input type="checkbox" value="爬山" />
    5 <input type="checkbox" value="阅读" />
    6 </fieldset>
  • 提交按钮<input type="submit"/>
    当用户单击<inputt type="submit"/>的提交按钮时,表单数据会提交给<form>标签的action属性所指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本。 
    <input type="submit" value="提交"/>
  • 重置按钮<input type="reset"/>

当用户单击<input type="reset"/>按钮时,表单中的值被重置为初始值。在用户提交表单时,重置按钮的name和value不会提交给服务器。

<input type=“reset” value=“重置按钮"/>

  • 普通按钮<input type="button"/>

普通按钮通常用于单击执行一段脚本代码。

<input type="button" value="普通按钮"/>

  • 图像按钮<input type="image"/>

图像按钮的src属性指定图像源文件,它没有value属性。图像按钮可代替<input type="submit"/>,而现在也可以通过css直接将<input type="submit"/>按钮的外观设置为一幅图片。

<input type="image" src="bg.jpg" />

解决方法:在CSS中将fieldset的border设置为0,legend的display设置为none即可。
2、使用label标签
我们对form中的文本标签给定一个label标签,并使用for属性使其与表单组件相关联,效果为单击文本标签,光标显示在相对应的表单组件内。

3. 表单属性

action:规定当提交表单时,向何处发送表单数据。action取值为:第一,一个URL(绝对URL/相对URL),一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理。比如<form action="http://www.cnblogs.com/reg.ashx">,当用户提交这个表单时,服务器将执行网址"
  method:该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值,最常用的是get和post。第一,使用get方式提交表单数据,Web浏览器会将各表单字段元素及其数据按照URL参数格式附在<form>标签的action属性所指定的URL地址后面发送给Web服务器;由于URL的长度限制,使用get方式传送的数据量一般限制在1KB以下。第二,使用post方式,浏览器会将表单数据作为HTTP请求体的一部分发送给服务器。一般来说,使用post方式传送的数据量要比get方式传递的数据量大;根据HTML标准,如果处理表单的服务器程序不会改变服务器上存储的数据,则应采用get方式(比如查询),如果表单处理的结果会引起服务器上存储的数据的变化,则应该采用post方式(比如增删改操作)。第三,其它方式(Head、PUT、DELETE、TRACE 或 OPTIONS等)。其实,最初HTTP标准对各种操作都规定了相应的method,但后来很多都没有被遵守,大部分情况只是使用get或post就OK。关于更多的各种method方式的区别,由于我目前对HTTP协议了解的不多,不敢妄下结论。很多园友的讨论也好像不是很深入,大家争论比较多。
参见123

target:该属性规定在何处显示action属性中指定的URL所返回的结果。取值有_blank(在新窗口中打开)、_self(在相同的框架中打开,默认值)、_parent(在父框架中打开)、_top(在整个窗口中打开)和framename(在指定的框架中打开)。
  title:设置网站访问者的鼠标放在表单上的任意位置停留时,浏览器用小浮标显示的文本。
  enctype:规定在发送到服务器之前应该如何对表单数据进行编码。取值:默认值为 "application/x-www-form-urlencoded",在发送到服务器之前,所有字符都会进行编码(空格转换为 " " 加号,特殊符号转换为 ASCII HEX 值);“multipart/form-data”:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
  name:表单的名称。注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和JavaScript中使用的。

除了以上方法,我们还可以用label套嵌整个表单组件和文本标签,如:
<label for="fname">First name:<input type="text" id="fname" name="fname" value="" /></label>
根据规范,文本会自动与邻接的表单组件关联,但遗憾的是——现在主流的浏览器IE6并不支持这个特性。
3、使用accesskey和tabindex属性
网站要兼顾更多情况下的使用,比如没有光标设备(如鼠标)的情况下,要让使用键盘操作也可以完成form的填写,这时候点击对于它们来说,已经没有任何意义。我们这个时候选用label的accesskey(快捷键,IE下为alt accesskey属性值,FF下为alt shift accesskey属性值)和tabindex属性(Tab键,tabindex属性值为顺序)添加到表单标签上,如label,input等。

Detailed Register

4、使用optgroup标签
optgroup标签的作用是在选择列表中定义了一组选项。我们可以选用optgroup标签给select元素的options分类,并使用label属性,属性值会在下拉列表(select)里显示为一个不可选的、缩进标题。注意:optgroup 不支持嵌套。

在form中,我们经常会对form中的信息进行分组,比如注册form,我们可能会将注册信息分组成基本信息(一般为必填),详细信息(一般为可选),那我们如何更好的来实现呢?我们可考虑在form中加入下面两个标签:

并且使用button标签将比input按钮来得更有语义化,简单的从字面意思也可以理解。

定义与用法
定义为一个提交按钮。在button元素内你可以放置内容,像文本(text)或者图片(images)。这是这个元素和input元素按钮的区别。

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

button相对于input提供了更多的功能与更丰富的内容。button将按钮文字单独出来,并且可以在button内添加图片,赋予文字和图片更多选择的样式,使生硬的按钮变得更生动。

Nanjing Suzhou Hangzhou Wenzhou

...

复制代码 代码如下:

复制代码 代码如下:

...

...

5、使用button标签

IE6.0 中存在一个小Bug(FireFox 中不存在):使用键盘方向键进行选择时,在 IE 中,当选中项由一个optgroup的选项换成另一optgroup 的选项时,不会触发onchange。解决办法是:增加 onkeydown 或 onkeyup 事件协助解决。

<label for="fname" accesskey="f" tabindex="1" >First name:</label> 
<input type="text" id="fname" name="fname" value="" />

Definition and Usage
Defines a push button. Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.

复制代码 代码如下:

复制代码 代码如下:

<form id="demoform" class="democss" action="">
<fieldset>
<legend>Basic Register</legend>
<p>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="" />
</p>
...
</fieldset>
<fieldset>
<legend>Detailed Register</legend>
<p>
<label for="interest">Interest:</label> 
<input type="text" id="interest" name="interest" value="" />
</p>
...
</fieldset>
...
</form>

fieldset默认是带边框的,而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。

复制代码 代码如下:

<button><img src="images/click.gif" alt="Click Me!" />Click Me!</button> 

1、使用fieldset和legend标签

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

本文由时时app平台注册网站发布于web前端,转载请注明出处:简言之form规范化实例——语义结构【彩世界网址

关键词: