前端入门须知轻松学会form表单制作

早期白癜风治疗方法 http://pf.39.net/bdfyy/zjdy/150516/4624568.html

主要内容

Form表单表单元素表单元素的属性HTML5新增type类型HTML新增属性学习目标

一、Form表单

表单在Web网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个Html文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上的ASP或PHP等处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。

所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

post和get区别:

1、数据提交方式,get把提交的数据url可以看到,post看不到

2、get一般用于提交少量数据,post用来提交大量数据

计算机中的位:二进制数系统中,每个0或1就是一个位(bit),位是数据存储的最小单位。其中8bit就称为一个字节(Byte)。计算机中的CPU位数指的是CPU一次能处理的最大位数。例如32位计算机的CPU一次最多能处理32位数据。

二、表单元素

一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。  

1.表单标签

是指form标签本身,它是一个包含表单元素的区域,使用form/form定义  

2.表单域

是form标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,对应用户不同的数据。(比如:文本域、下拉列表、单选框、复选框等等)

3.表单按钮

用来提交form表单中的所有信息到服务器

表单域和表单按钮都属于表单元素

2.1文本框

文本域通过inputtype=text标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

浏览器显示如下:

2.2密码框

密码字段通过标签inputtype=password来定义:

浏览器显示效果如下:

注意:密码字段字符不会明文显示,而是以星号或圆点替代。

2.3单选按钮

inputtype=radio标签定义了表单单选框选项

浏览器显示效果如下:

2.4复选框

inputtype=checkbox定义了复选框.用户需要从若干给定的选择中选取一个或若干选项。

浏览器显示效果如下:

2.5文件

定义文件选择字段和浏览...按钮,供文件上传:

2.6隐藏域

定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由JavaScript改变它们的值:

2.7提交按钮

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

浏览器显示效果如下:

2.8重置按钮

定义重置按钮(重置所有表单值为默认值):

提示:请谨慎使用重置按钮!对于用户来说,不慎点击了重置按钮是件很恼火的事情。

2.9按钮

没有任何功能的按钮

2.10图像图片按钮

定义图像作为提交按钮:

2.11按钮

button标签定义一个按钮。

在button元素内部,您可以放置内容,比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。

提示:请始终为button元素规定type属性。不同的浏览器对button元素的type属性使用不同的默认值。

2.12下拉列表

select元素用来创建下拉列表。

option标签定义下拉列表中的一个选项(一个条目)。

optgroup标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合,你可以使用optgroup标签能够很简单的将相关选项组合在一起。

2.13多行文本框

textarea标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。

可以通过cols和rows属性来规定textarea的尺寸大小,不过更好的办法是使用CSS的height和width属性。

2.14labe

label标签为input元素定义标注(标记)。

label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

label标签的for属性应当与相关元素的id属性相同。

提示:for属性可把label绑定到另外一个元素。请把for属性的值设置为相关元素的id属性的值。

三、HTML5新增type类型

3.1email

定义用于e-mail地址的字段(当提交表单时会自动对email字段的值进行验证)

3.2url

定义用于输入URL的字段:

3.3search

定义搜索字段(比如站内搜索或谷歌搜索等):

3.4tel

定义用于输入电话号码的字段:

3.5color

从拾色器中选取颜色:

3.6number

定义用于输入数字的字段(您可以设置可接受数字的限制):

请使用下面的属性来规定限制:

max-规定允许的最大值。

min-规定允许的最小值。

step-规定合法数字间隔。

value-规定默认值。

3.7range

定义用于精确值不重要的输入数字的控件(比如slider控件)。您也可以设置可接受数字的限制:

请使用下面的属性来规定限制:

max-规定允许的最大值。

min-规定允许的最小值。

step-规定合法数字间隔。

value-规定默认值。

3.8date

定义date控件:

3.9month

定义month和year控件(不带时区):

3.10week

定义week和year控件(不带时区):

四、HTML5新增属性

4.1autofocus属性

autofocus属性规定在页面加载时,域自动地获得焦点。

注释:autofocus属性适用于所有input标签的类型。

4.2multiple属性

multiple属性规定输入域中可选择多个值。

注释:multiple属性适用于以下类型的input标签:email和file。

4.3placeholder属性

placeholder属性提供一种提示(hint),描述输入域所期待的值。

4.4required属性

required属性规定必须在提交之前填写输入域(不能为空)。

五、作业




转载请注明:http://www.aierlanlan.com/cyrz/5651.html

  • 上一篇文章:
  •   
  • 下一篇文章: