对HTML5标签的认识(四)
这篇随笔讲讲HTML5中的表单和表单的一些元素
一、表单的作用是什么?
概念:表单在网页中主要是负责对数据信息的采取,表单一共分成三个部分:
1、表单的标签:这里面包含了处理表单的数据所用CGI程序以及数据提交到服务器的方法。
2、表单域元素:包含着文本框,和密码框,多行文本框,复选框,单选框,下拉选择框和文件上传框等等元素。
3、表单按钮:包括提交的按钮,复位按钮和一般的按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
CGI是什么呢?
CGI是Web服务器运行时外部程序的规范,按CGI编写的程序可以扩展服务器功能。CGI 应用程序能与浏览器进行交互,还可通过数据库API 与数据库服务器等外部数据源进行通信,从数据库服务器中获取数据。格式化为HTML文档后,发送给浏览器,也可以将从浏览器获得的数据放到数据库中。
二、表单标签的认识
1、<form>标签
<form>标签用于为用户输入创建HTML表单,如下图是最常见的表单:
表单能包含input元素比如文本字段,复选框,单选框,提交按钮等等
表单的主要作用就是传输数据给服务器。
定义一个简单的表单:
<!DOCTYPE html> <html> <head> <title>Form</title> <head> <body> <form action="" method="get/Post"> <p>姓名:<input type="text" name="txtName" /></p> <p>年龄:<input type="text" name="txtName" /></p> <input type="submit" value="提交" /> </form> </body> </html>
运行效果:
看到form元素里面的Method属性 它有连两个值 set和Post
它们的区别:
1、get是从服务器上获取数据,post是向服务器传送数据。
2、对于get方式,服务器端用Request,QueryString获取变量值,对于post方式,服务器端用Request,Form获取提交的数据。
3、get安全性较低,post安全性较高。
action属性是规定当提交表单时向何处发送表单数据。(大概了解)。
三、<input>标签
定义:<input> 标签规定用户可输入数据的输入字段。
根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
效果如下:
定义input可以在文本框里面输入内容了。
type属性:规定input元素的名称
type属性值默认text值,表示定义一个单行的文本字段(默认宽度为 20 个字符)。
type属性值有很多,如下图:
做一个两个文本输入框和两个单选按钮还有一个提交按钮的小案例:
<!DOCTYPE html> <html> <head> <title>Form</title> <head> <body> <form action="" method="get"> <!--name属性是定有一个input元素的名称--> <!--文本输入框--> <p>姓名:<input type="text" name="txtName"></p> <p>年龄:<input type="password" name="txtAge"></p> <!--单选按钮的属性值为radio,当你要定义单选按钮时就用radio属性值--> <!--单选按钮--> <p>性别:<input type="radio" name="sex">男 <input type="radio" name="sex">女</p> <!--提交按钮--> <input type="submit" value="提交" /> </form> </body> </html>
input有很多属性,比如id,name,type,checked,size,max,min,height,form,width,value,list这些经常用的到的属性。
就拿checked属性来说,我们在注册一个账号的时候经常能看到性别选项,按照人口惯例,是男性的概率偏多,所以在选择中时为了方便,我们可以给它一个默认选中男性(当然也可以现在女性),这样让用户的体验更好。
代码实现:
<!DOCTYPE html> <html> <head> <title>Form</title> <head> <body> <form action="" method="get"> <!--name属性是定有一个input元素的名称--> <!--文本输入框--> <p>姓名:<input type="text" name="txtName"></p> <p>年龄:<input type="password" name="txtAge"></p> <!--单选按钮的属性值为radio,当你要定义单选按钮时就用radio属性值--> <!--单选按钮--> <p>性别:<input type="radio" name="sex" checked="checked" >男 <input type="radio" name="sex">女</p> <!--提交按钮--> <input type="submit" value="提交" /> </form> </body> </html>
运行效果:
多选框:
<!DOCTYPE html> <html> <head> <title>textarea</title> <head> <body> <p>爱好:<input type="checkbox" name="游泳" >游泳 <input type="checkbox" name="唱歌">唱歌 <input type="checkbox" name="篮球">篮球 <input type="checkbox" name="跳舞">跳舞 </p> </body> </html>
运行效果:
四、<textarea>标签
定义:<textarea>标签定义多行的文本输入控件。文本中可容纳无限数量的文本,可通过clos和rows属性来规定textarea的尺寸,不过更好的办法就是使用css的height和width属性。
<!DOCTYPE html> <html> <head> <title>textarea</title> <head> <body> <textarea rows="3" cols="20">textarea标签是多行的文本输入控件。可通过rows和cols来改变尺寸</textarea> </body> </html>
运行效果:
五、<button>标签
定义:<button>标签是定义一个按钮。在button元素的内部,你可以放置内容,比如文本,图像,这是该元素于使用input元素创建的按钮之间的不同之处。相比<input type=" ">有更强大的功能和更丰富的内容。
请始终为按钮规定type属性,属性 Internet Explorer 的默认类型是button 而其他的浏览器中的默认值是“submit”。
定义一个按钮:
<!DOCTYPE html> <html> <head> <title>textarea</title> <head> <body> <button type="button">点击</button> </body> </html>
注意:如果在HTML表单中使用button元素,不同的浏览器会提交不同的按钮值,请使用input元素在HTML,表单中创建按钮。
六、<select>标签
定义:select元素可创建单选多选菜单,<select>元素中的<option>标签用于定义列表中的可用选项。
下拉菜单:
代码实现:
<!DOCTYPE html> <html> <head> <title>textarea</title> <head> <body> <select> <option value="HTML5">HTML5网页编程语言</option> <option value="CSS">css样式</option> <option value="java编程">Java编程</option> <option value="JavaScript">JavaScript</option> </select> </body> </html>
运行效果:
<option>
注:1、<option>标签可以在不带有任何属性的情况下使用,但是你通常需要使用value属性,此属性会指示被送往服务器的内容。
2、请与select元素配合使用此标签,否则这个标签毫无意义。
对HTML5标签的认识(四)的更多相关文章
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- HTML5 学习笔记(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...
- html5标签video(播放器)学习笔记(二)-基本操作
html5标签video(播放器)学习笔记(二)-基本操作 subying 发布时间: 2014/12/01 23:59 阅读: 13008 收藏: 21 点赞: 3 评论: 0 摘要 本文介绍了ht ...
- Html5 学习系列(四)文件操作API
原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- HTML5标签与HTML4标签的区别示例介绍_html5教程技巧
(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...
- [js开源组件开发]html5标签audio的样式更改
html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...
随机推荐
- vue+axios访问本地json数据踩坑点
当我们想在vue项目中模拟后台接口访问json数据时,我们发现无论如何也访问不到本地的json数据. 注意:1.在vue-cli项目中,我们静态资源只能放在static文件夹中,axios使用get请 ...
- wGenerator如何编写模板
编写模板大致分为4个步骤: 确定开发语言与数据库类型 分析表数据类型与语言的类型对应 分析代码中哪些可以规整为模板 编写与测试模板 我们对照流程图看的话会更加清晰: 1.如何分析表数据与开发语言的类型 ...
- zookeeper源码 — 二、集群启动—leader选举
上一篇介绍了zookeeper的单机启动,集群模式下启动和单机启动有相似的地方,但是也有各自的特点.集群模式的配置方式和单机模式也是不一样的,这一篇主要包含以下内容: 概念介绍:角色,服务器状态 服务 ...
- MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素
之前由MIP团队维护的<移动 Web 加速技术月报>从本期开始,正式升级为<MIP 技术月报>,与以往不同的是,<MIP 技术月报>将会与大家分享包含移动加速技术以 ...
- Python创建微信机器人
微信,一个日活10亿的超级app,不仅在国内社交独领风骚,在国外社交也同样占有一席之地,今天我们要将便是如何用Python来生成一个微信机器人,突然想起鲁迅先生曾经说过的一句话:因为是微信机器人系列的 ...
- .NET Core + Ocelot + IdentityServer4 + Consul 基础架构实现
先决条件 关于 Ocelot 针对使用 .NET 开发微服务架构或者面向服务架构提供一个统一访问系统的组件. 参考 本文将使用 Ocelot 构建统一入口的 Gateway. 关于 IdentityS ...
- python assert的用处
python assert 句语格式及用法很简单.通常程序在运行完之后抛出异常,使用assert可以在出现有异常的代码处直接终止运行. 而不用等到程序执行完毕之后抛出异常. python assert ...
- Dynamics 365中自定义工作流活动更新了输入输出参数后获取的方法
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复245或者20170309可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- Windows Server 2016-客户端退域的三种方法
前边我们提到了客户端加域的操作方法,本章为大家补充域客户端退域的操作过程,包含图形化.netdom remove.Powershell三种方法,具体内容如下: 图形化退域方法: 1.Win键,计算机右 ...
- windows之如何把iso文件转换为VHD文件
(1)Convert-WindowsImage.ps1的下载路径: 链接:https://pan.baidu.com/s/18duFQFW8T_yI2JeQ1lhJgQ 提取码:b5ps autoun ...