客服热线:

WEB前端教程:03Form表单

2019-04-21 21:15:59浏览:2 评论:0 来源:招生宝   
核心摘要:form表单之前学习的标签更多的是向用户展示信息,假如服务器端需要验证用户是否存在,这时就需要有一个用户输入内容的标签。表单

form表单

之前学习的标签更多的是向用户展示信息,假如服务器端需要验证用户是否存在,这时就需要有一个用户输入内容的标签。表单在网页中主要负责数据采集功能,它用<form>标签定义。用户输入的信息都要包含在form标签中,点击提交后,<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。

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

容纳各种各样的控件。

表单标签的格式: 

 <form action="url" method=get|post name="myform" ></form>

  -name:表单提交时的名称

-action:提交到的地址

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

post和get区别:

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

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

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

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

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

1.表单标签

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

2.表单域

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

3.表单按钮

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

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

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

单选按钮<input type="radio" name=””/>

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

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

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

下拉框<select>标签<select><option value="1">北京</option></select>多行文本<textarea></textarea>提交按钮<input type="submit"/>普通按钮<input type="button"/>重置按钮<input type="reset"/>文本框<input type="text" />

属性:

name:定义控件名称

value:指定控件初始值

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

属性:name:定义控件名称

value:指定控件初始值

单选按钮

<input type="radio" />

属性:

name:定义控件名称

value:指定控件初始值

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

性别:

<input type="radio" name="sex"/>男

<input type="radio" name="sex"/>女

复选框

<input type="checkbox"  />

属性:

name:定义控件名称

value:指定控件初始值

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

例如:爱好:

<input type="checkbox" checked/>游戏

<input type="checkbox"/>唱歌

<input type="checkbox"/>跳舞

文件

<input type="file"/>

属性:

name:定义控件名称

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

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

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

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

 <form action="" method="post" enctype="multipart/form-data">

<input type="file" name="file1"/>

 </form>

隐藏区域

<input type="hidden"  />

属性:

name:定义控件名称

value:指定控件初始值

按钮

<input type="button"  />

属性:

name:定义控件名称

value:指定控件初始值

不具有提交功能


提交按钮

<input type="submit"  />

属性:

name:定义控件名称

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


重置按钮

<input type="reset"  />

属性:

name:定义控件名称

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


图像图片按钮

<input type="image" src=https://www.school360.cn/skin/m03skinBlue/image/nopic.gif>

属性:

name:定义控件名称

src:指定图像地址


按钮

 <button>按钮</button>

属性:

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



下拉列表框

select属性:                                      <select>

name:此列表框的名字                              <option></option>

multiple:多选,不用赋值                         <option></option>

size :规定下拉列表中可见选项的数目(显示几行)   </select>

disabled:规定禁用该下拉列表

option属性:

selected :用来指定默认的选项

value: 用来给<option>指定的那一个选项赋值,这个值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value 属性来获得该区域选中的数据项的




下拉列表框续

<select name="" id="">

<optgroup label="北京">

<option value="1">东城区</option>

<option value="2">西城区</option>

<option value="3">海淀区</option>

</optgroup>

<optgroup label="河北省">

<option value="4">石家庄</option>

<option value="5">保定市</option>

<option value="6">沧州市</option>

</optgroup>

</select>




多行文本框

<textarea></textarea>

属性:

cols :这文字区块的宽度

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


<textarea name="" i阿d="" cols="30" rows="10"></textarea>




<label></label>

标签为 input 元素定义标注。

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


  <label for="pwd">记住密码</label>

<input type="checkbox" name="pwd" id="pwd" />


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


<form>

<label for="male">Male</label>

<input type="radio" name="sex" id="male" />

</form>


<label>标签一般和radio、checkbox类型一起使用。




<fieldset>元素集

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

<fieldset>

     <legend>健康信息</legend>

 身高:<input type="text" />

 体重:<input type="text" />

</fieldset>




HTML5新增input类型

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

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

电子邮件类型

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

语法:<input type="email"/>

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

搜索类型

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

语法:<input type="search"/>

URL类型

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

语法:<input type="url"/>

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

颜色类型

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

语法:<input type="color"/>

数字类型

功能描述:只能接受数字

语法:<input type="number"/>

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

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

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

范围类型

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

语法:<input type="range" min="0" max="100" value="80"/>

属性:min:范围的下限值

max:范围的上限值

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

value:设置初始值

日期类型

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

语法:<input type="date" />

周类型

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

语法:<input type="week" />

月份类型

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

语法:<input type="month" />

HTML5新增属性

placeholder

作用:默认提示

语法:<input type="text" placeholder="请输入用户名"/>

multiple

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

语法:<input type="email" multiple/>

autofocus

作用:自动获取焦点

语法:<input type="text" autofocus/>

required

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

语法:<input type="text" required/>

minlength和 maxlength

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

语法:<input type="text" minlength="6" maxlength="18"/>

min和max

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

语法:<input type="number" min=”0” max=”100”/>

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

WEB前端教程:雪碧图和滑动门

上一篇:

WEB前端教程:HTML基本元素

  • 信息二维码

    手机看新闻

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