表单

一.表单    表单就是一个将用户信息组织起来的容器:       <将需要用户填写的内容放置在表单容器中,当用户单击"提交"按钮的时候,表单会将数据统一发送给服务器>    1.表单的内容:       1)创建表单后,就可以在表单中放置控件以接受用户的输入       2)这些控件通常放在<form></form>标签之间,也可以在表单之外用来创建用户界面       3)不同的表单控件有不同的用途    2.表单标签及表单属性       表单的创建:<from>...</from>该标签用于在网页中创建表单区域,属于容器标签,其他表单标签需要在它的范围内才有效,<input>标签用以设定各种输入资料的方法     <from>标签的属性:        action:此属性指示服务器上处理表单输出的程序,一般来说,当用户单击表单上的"提交"按钮后信息发送到Web服务器上,由attion属性所指的程序处理如果action为空则默认提交到本页     method:此属性告诉浏览器,如何将数据发送给服务器,他指向服务器发送数据的方法。

语法为:method=(getpost)
<form method="post" action=""></form>

  post和get的区别     post的方法不不会改变地址栏的状态,表单数据不会被显示     使用get方法提交方式,地址栏发生改变,表单数据不会被显示   基于以上两点:post方法提交的数据安全性明显高于get方法提交的数据。在日常开发中建议大家尽可能地采用post的方法来提交表单数据,   <input>元素常用属性       text password checkbox radio submit reset file email number url hidden image和button默认为text      name        此元素指定表单元素名称。例如如果表单上有几个文本框,可以按名称来标识它     value        此属性是可选属性他指定元素初始值,如果type为radio类型则必须指定一个值     size        此属性指定表单元素的初始宽度        如果type为text或passWord类型则表单元素大小以字符为单位对于其他输入类型,宽度以像素为单位     maxlenght        此属性指定可在text 或 password元素中输入最大字符数,默认值无限大     checked        此属性用于指定按钮是否被选中。当输入类型为radio或CheckBox使用此属性

文本框   用于输入单行文本信息将表单元素type设为text就可以了

<p>
<input  type=" text"/>
</p>

密码框   设置了type属性后在密码框输入的字符全都是以黑色实心的来显示,从而实现对数据的处理

<input type="password"/>

单选按钮   用户只能选中一个单选按钮在使用单选按钮时,需要一个显示的value属性   如果需要一个默认的选项即可以,使用checked 属性

<input name="a" type="radio"value="男" checked/>男
<input name="a" type="radio"value="女"/>女

复选框   复选框和单选框类似,复选框允许拥有多个选型

<input name="a" type="CheckBox"value="男" checked/>男
<input name="a" type=CheckBox"value="女"/>女

列表框   列表框目的主要是使用户快速方便的选择一些选项而且节省空间

<select>
<option value="1">1<option/>
<option value="2" selected>2<option/>
<option value="3">3<option/>
</select>月

按钮   按钮分为三个(button)普通按钮(submit)提交按钮(reset)重置按钮   name表示给按钮命名value 显示按钮上的字

<input name="a" type="button"value="男" >男 普通按钮
<input name="a" type="submit"value="女"/>女 提交按钮
<input name="a" type="reset"value="女"/>女  重置按钮

使用图片按钮

<input name="a" type="image"src ="地址"/>提交

多行文本域   语法

<textarea name="textarea"cols="显示列数"row="显示行数"

文件域   文件域的作用用于实现文件选择将type设置为file

<input type="file"name=“type”/>
<input type="submit"anme="upload"value="上传"/>

邮箱   与以上的表单元素不同的是email在提交表单是在自动验证如果不是一个有效的邮箱地址则用户不允许提交订单

<input type="email" name="email"/>

url   用于输入URL地址这类的特殊文本的文本框提交表单时如果输入不是uil地址格式的文本,将不允许提交表单

<input type="url" name="22"></input>

数字   number   用于提供数字的文本框我们可以对数字进行控制包括最大值,最小值合法的间隔或默认,如果所输入的数字不在限定的范围之内,   则会出现错误提示。

<input type="number"name="num"min="0" max="100"step="10"/>

属性

描述

value

number

规定的默认值

min

number

规定允许的最小值

max

number

规定允许的最大值

step

number

规定合法数字间隔(如step="2",则合法数是-2 0、2、4等)

滑块 用于提供数字的文本框我们可以对数字进行控制包括最大值,最小值合法的间隔或默认,如果所输入的数字不在限定的范围之内, 则会出现错误提示。

<input type="range"name="num"min="0" max="100"step="10"/>

搜索框   search用于提供输入搜索关键字的文本框虽然外观看起来和input差不多但实现起来却不容易因为search搜索不只是谷歌和百度是任意一个搜索框

<input type="search" name="1"/>
<input type="submit" name="2"/>

表单的隐藏域   将type属性设置为hidden隐藏类型即可创建一个隐藏域

<input type="hidden" value="666"name=""username/>

表单的只读与禁用   只读场景       网站服务器方不希望用户修改数据,这些数据在表单元素中显示。如注册或交易协议   禁用场景       只有满足某个条件后才能选用某项功能。如只用用户同意了才能点击注册按钮。

<input type="text"value="张三"readonly/>只读
<input type="text"value="张三"disabled/>禁用

规范   对于布尔类型的属性,属性值可以省略

表单元素的标注   使用foe属性来指定当鼠标点击脚本时,焦点对应的表单元素   语法

<lable for="male>表单元素的id">标注的文本<lable>
<input type="text" name="1"id="male"/>

表单的验证   验证表单的好处         1 减轻服务器的压力         2保证数据的可行性和安全性     在客户端对表单进行验证是非常有必要的

表单的初级验证   1 placeholder     用于input的文本框的一种提示(hint)可以描述文本框期待用户输入任何内容

<input type="search" name="1"placeholder="要输入的关键字"/>

  2 required     属性用于规定文本框填写内容不能为空,否则不允许用户提交表单

<input type="text" required/>

  3 pattern     用于验证input类型文本框用户输入内容与自定义的正表达式相匹配

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

URL中的#

作者:阮一峰   http://www.ruanyifeng.com/blog/2011/03/url_hash.html

841
来自专栏逸鹏说道

05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:h...

26910
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

在上篇《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了Bootstrap开发框架的一些基础性概括,包括总体界面...

2805
来自专栏wym

什么是DC,什么是兼容性DC

DC全称为Device Content,翻译过来是“设备描述表”或者“设备上下文”。显示图片时都会用到,为什么呢?首先,没有一句C语言可以帮助我们在屏幕上显示图...

1381
来自专栏编程

如何快速合并两个字典

现在有两个字典: x = {'a':1,'b':2}y = {'b':10,'c':11} 如何将这两个字典合并成一个新的字典z,有看过我之前写的文章可能会知道...

2786
来自专栏木子昭的博客

模拟Vue数据的双向绑定

Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向...

3285
来自专栏李智的专栏

Emmet插件使用教程

671
来自专栏前端黑板报

DOM小结

DOM是针对HTML和XML文档的一个API(应用程序编程入口)。DOM描绘了一个层次化的节点树,允许开发人员添加/移除和修改页面某一部分。 注:从上面的引述中...

18810
来自专栏java一日一条

10+ 实用的 JavaScript 调试小技巧

除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者...

431
来自专栏IMWeb前端团队

谈一谈CDN的JS,CSS文件加载出错主域名重试的问题

背景知识 【卡爷文章】CSS文件动态加载(续)—— 残酷的真相 浏览器 CSS/JS 加载能力测试表 css、js的相互阻塞 了解这些基础知识之后,我们再来谈谈...

2015

扫码关注云+社区