客服热线:

WEB前端教程:03Form表单

2020-03-19 09:23:06浏览:116 评论:0 来源:教学网   
核心摘要:form表单之前学习的标签更多的是向用户展示信息,假如服务器端需要验证用户是否存在,这时就需要有一个用户输入内容的标签。表单
 form表单

之前学习的标签更多的是向用户展示信息,假如服务器端需要验证用户是否存在,这时就需要有一个用户输入内容的标签。表单在网页中主要负责数据采集功能,它用

标签定义。用户输入的信息都要包含在form标签中,点击提交后,和
里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。

 

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

容纳各种各样的控件。

表单标签的格式: 

 

 

 

  -name:表单提交时的名称

-action:提交到的地址

-method:提交方式,默认为get

post和get区别:

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

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

3.get最多提交1K数据,post理论上没有限制

4.get提交的数据在浏览器历史记录中,安全性不好一个完整的表单包含三个基本组成部分:

表单标签、表单域、表单按钮。

 

1.表单标签

是指

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

 

 

2.表单域

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

 

3.表单按钮

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

表单域和表单按钮都属于表单元素。单行文本框默认值是type="text"

密码框 

单选按钮

复选框

隐藏域

文件上传

下拉框 多行文本area>提交按钮普通按钮重置按钮文本框

属性:

name:定义控件名称

value:指定控件初始值

密码框

属性:name:定义控件名称

value:指定控件初始值

单选按钮

属性:

name:定义控件名称

value:指定控件初始值

checked:设置控件初始状态是否被选中

性别:

复选框

属性:

name:定义控件名称

value:指定控件初始值

checked:设置控件初始状态是否被选中

例如:爱好:

游戏

唱歌

跳舞

文件

属性:

name:定义控件名称

使用file类型的input时要注意以下几点

1.form表单的method属性值要为post

1.form要加enctype="multipart/form-data"属性,这个属性说明了我们的文件以二进制方式传输文件,因为我们计算机本身最底层都是以二进制来显示、传输。

默认地,表单数据会编码为 "application/x-www-form-urlencoded",不能用于文件上传

 

 

 

隐藏区域

属性:

name:定义控件名称

value:指定控件初始值

按钮

属性:

name:定义控件名称

value:指定控件初始值

不具有提交功能

 

提交按钮

属性:

name:定义控件名称

value:指定按钮表面显示文字

 

重置按钮

属性:

name:定义控件名称

value:指定按钮表面显示文字

 

图像图片按钮

属性:

name:定义控件名称

src:指定图像地址

 

按钮

 

属性:

type:button/submit/reset,默认值为submit

 

 

下拉列表框

select属性:                                     

disabled:规定禁用该下拉列表

option属性:

selected :用来指定默认的选项

value: 用来给

 

 

 

 

 

 

多行文本框

area>

属性:

cols :这文字区块的宽度

rows :这文字区块的列数,即其高度

 

area>

 

 

 

 

标签为 input 元素定义标注。

label是input的描述,它本身不会有特殊效果,但它和其它input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中,如“记住密码”

 

 

 

*通过label的for指向按钮的id来绑定,for和id属性的值要相同

 

 

 

 

 

 

 

 

 

 

元素集

 

fieldset 元素可将表单内的相关元素分组,通常和legend标签一起用,legend标签定义了fieldset的提示信息,fieldset是块级元素。

 

 

     健康信息

 身高:

 体重:

 

 

 

 

 

HTML5新增input类型

1.在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的Javascript代码

2.以上的不足都已经在HTML5中被克服,HTML5在以上的基础上增加了许多标签和属性,为开发人员带来了极大的方便

电子邮件类型

功能描述:输入E-mail地址的文本框

语法:

注意:输入的内容中必须包含"@","@"后面必须具有内容

搜索类型

功能描述:输入搜索关键字的文本框

语法:

URL类型

功能描述:输入WEB站点的文本框

语法:

注意:输入的内容中必须包含"http://",后面必须有内容

颜色类型

功能描述:预定义的颜色拾取控件

语法:

数字类型

功能描述:只能接受数字

语法:

属性:min:当前域能接受的最小值

max:当前域能接受的最大值

step:决定了域所接受值递增或递减的步长,默认为1

范围类型

功能描述:允许用户选择一个范围内的值

语法:

属性:min:范围的下限值

max:范围的上限值

step:声明该值递增或递减的步长

value:设置初始值

日期类型

功能描述:创建一个日期输入域

语法:

周类型

功能描述:与date类型相似,但只能选择周

语法:

月份类型

功能描述:与date类型相似,但只能选择月份

语法:

HTML5新增属性

placeholder

作用:默认提示

语法:

multiple

作用:支持在一个域中输入多个值,逗号隔开,一般配合邮箱和URL使用

语法:

autofocus

作用:自动获取焦点

语法:

required

作用:防止域为空提交表单时

语法:

minlength和 maxlength

作用:定制元素允许的最小字符数和最大字符数

语法:

min和max

作用:定制元素允许的最小数字和最大数字

语法:

(责任编辑:小编)
下一篇:

浙江关于2020年度一级注册消防工程师资格考试工作的通知

上一篇:

office2013,2016全套视频教程

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们
 
0相关评论