表单

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

相关文章

来自专栏python学习路

二、路由、模板

一、路由系统 在settings.py文件中通过ROOT_URLCONF指定根级url的配置 urlpatterns是一个url()实例的列表 一个url()对...

2828
来自专栏Java帮帮-微信公众号-技术文章全总结

10.Java文件操作案例

10.Java文件操作案例 Java 实例 - 文件写入 以下实例演示了使用 write() 方法向文件写入内容: 实例 ? 以上代码运行输出结果为: ? 创建...

2856
来自专栏闻道于事

JavaScript面向对象之Windows对象

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

2809
来自专栏csxiaoyao

vim按键整理

2615
来自专栏小俊博客

通过JS显示网站运行时间

1104
来自专栏前端知识分享

第218天:Angular---模块和控制器

所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中 ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析...

592
来自专栏Python

nginx配置 location及rewrite规则详解

1132
来自专栏finleyMa

Chrome 功能总结

原文:https://developers.google.com/web/updates/2017/08/devtools-release-notes#awai...

702
来自专栏lgp20151222

$.ajax()方法参数详解

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器...

481
来自专栏mwangblog

python操作文本文件

904

扫描关注云+社区