表单

一.表单    表单就是一个将用户信息组织起来的容器:       <将需要用户填写的内容放置在表单容器中,当用户单击"提交"按钮的时候,表单会将数据统一发送给服务器>    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 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

HTML语义化:HTML5新标签——template

一、前言                                 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就...

2719
来自专栏mySoul

微信小程序自定义组件

其中,components为组件目录,nodemodules为模块目录,pages为小程序的页面目录,utils为一些基础功能的封装。好比安装的第三方百度统计功...

2463
来自专栏liulun

基于Qt的流程设计器(一)

一:先来看一下界面的截图: 说明: 拖动节点的时候,与该节点相关的箭头连线也会跟着调整; 用户可以使用鼠标从一个节点拖出一个箭头到另一个节点(鼠标在空白区域...

2616
来自专栏进击的君君的前端之路

Vue成神之路之全局API

vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

1033
来自专栏flutter开发者

Flutter动画【3】

在前面的文章中我们看了下Flutter中的补间动画和Flutter Widgets,今天我们来看下页面过渡动画,也可以叫做共享元素动画,页面A的元素过渡到页面B...

2254
来自专栏疯狂的小程序

微信小程序组件化编程和实践(下)

现在我们已经可以做到了两个组件之间的数据传递,那么如何在多个组件间传递数据呢?

4637
来自专栏vue学习

小程序 — 选项卡

(2)将用户点击传过来的index值赋给data中改变当前的索引值activeIndex

1992
来自专栏hbbliyong

RadioButtonList数据项不改变依然执行改变事件

问题:使用RadioButtonList导航到其他页面,当点击一数据项出现新页时候,关闭新页,再点击此数据项,由于数据项没有改变,所以不能触发他的Selecte...

2623
来自专栏进击的君君的前端之路

即时通讯系统(一)

1764
来自专栏闻道于事

JavaScript面向对象之Windows对象

JavaScript之Window对象 首先我们先了解一个概念:事件。 事件,就是把一段代码设置好,满足条件时触发。或者说,事件是可以被 JavaScript ...

2979

扫码关注云+社区