HTML表单
2015-09-23 22:13
288 查看
1.现在大多数网站的注册、登陆页面都是填写表单(Form)的形式,当用户输入了有效信息后,表单中的数据就通过HTTP协议传给后台的Web服务器,随后服务器再传回相应的信息,从而实现用户的注册与登陆过程。那么HTML表单的结构与常用属性有哪些呢?下面是笔者的一些认知:
(1)表单的基本结构
<html>
<head>
<title>标题描述文本</title>
</head>
<body>
<form id="" name="" action="" method="">
<!--表单输入控件--!>
</form>
</body>
</html>
(2)表单的常见属性及元素
action属性与method属性。
action属性定义一个URL,来指示表单(form)里的数据应该被发送到哪里处理。通常是一个服务器程序。
method属性的值有两个:
(1)GET
GET方式将表单中的数据与实际的URL一起显示在浏览器的地址栏,对于一些隐私性高的数据,这样的方式容易泄露,不安全。如下截图,制作的一个简单的表单,采用GET方法提交数据到服务器,用户在填写完相应数据点击提交后,URL地址栏会将用户填写的信息都显示出来。
(2 )POST方法
对于POST方法,用一个形象的比喻来说就是:GET方法是开在地面上的公交,二POST则是在地下运行的地铁,而且对于用户来说,这个地铁是不可见的。此外,GET方法对于图片上传是有大小限制的,许多网站在要求用户上传相应图片时都有做大小限制,原因之一也许就在这,二POST方法不会有大小限制。
(3)表单中的控件
表单中最常见的控件就是输入控件了。包括文本框(type="text")、密码框(type="password")、单选框(type="radio")、复选框(type="checkbox")、上传控件(type="file")、提交按钮(type="submit"/ type="image" src="url")、重置按钮(type="reset")、命令按钮(type="button")、下拉列表(<select><option>选项</option></select>)等。
要注意的是,对于单选按钮来说,要想实现单选功能,必须要把同类单选按钮的name属性设定为同一个值,ID属性值不能相同。
如下代码:
而对于下拉框的设置,除了上述提到的select与option的搭配之外。HTML5还提供了新的表单元素datalist。
写法如下:
这种写法的好处在于:用户不仅可以选择,同时也可以自主输入信息。
以上就是我个人关于表单的一些见解,如有不足之处,请大家指出,也欢迎大家交流,谢谢。
(1)表单的基本结构
<html>
<head>
<title>标题描述文本</title>
</head>
<body>
<form id="" name="" action="" method="">
<!--表单输入控件--!>
</form>
</body>
</html>
(2)表单的常见属性及元素
action属性与method属性。
action属性定义一个URL,来指示表单(form)里的数据应该被发送到哪里处理。通常是一个服务器程序。
method属性的值有两个:
(1)GET
GET方式将表单中的数据与实际的URL一起显示在浏览器的地址栏,对于一些隐私性高的数据,这样的方式容易泄露,不安全。如下截图,制作的一个简单的表单,采用GET方法提交数据到服务器,用户在填写完相应数据点击提交后,URL地址栏会将用户填写的信息都显示出来。
(2 )POST方法
对于POST方法,用一个形象的比喻来说就是:GET方法是开在地面上的公交,二POST则是在地下运行的地铁,而且对于用户来说,这个地铁是不可见的。此外,GET方法对于图片上传是有大小限制的,许多网站在要求用户上传相应图片时都有做大小限制,原因之一也许就在这,二POST方法不会有大小限制。
(3)表单中的控件
表单中最常见的控件就是输入控件了。包括文本框(type="text")、密码框(type="password")、单选框(type="radio")、复选框(type="checkbox")、上传控件(type="file")、提交按钮(type="submit"/ type="image" src="url")、重置按钮(type="reset")、命令按钮(type="button")、下拉列表(<select><option>选项</option></select>)等。
要注意的是,对于单选按钮来说,要想实现单选功能,必须要把同类单选按钮的name属性设定为同一个值,ID属性值不能相同。
如下代码:
<fieldset> <legend>性别</legend> <input type="radio" name="gender" value="male">男</input> <input type="radio" name="gender" value="male">女</input> </fieldset>
而对于下拉框的设置,除了上述提到的select与option的搭配之外。HTML5还提供了新的表单元素datalist。
写法如下:
<input type="text" list="list1"/> <datalist id="list1"> <option value="湖南">湖南</option> <option value="湖北">湖北</option> <option value="广州">广州</option> </datalist>
这种写法的好处在于:用户不仅可以选择,同时也可以自主输入信息。
以上就是我个人关于表单的一些见解,如有不足之处,请大家指出,也欢迎大家交流,谢谢。
相关文章推荐
- 【html】day01_Web概述_html工作原理_XML与HTML_乱码问题
- html——文字网页
- 【HTML】【学习】 Canvas学习笔记【中】
- MVC中@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction区别
- html字体属性控制,水平线,上下标,插入图片
- html学习笔记-XML
- IIS7.0设置 url重写成html(伪静态)
- html学习笔记-DOM
- HTML-右键菜单
- Html 列表
- 在html中 如何获取table的当前所在行的位置
- NSoup解析处理Html
- html 原生下拉菜单 select ,多选 multiple
- Html 中 <a>标签的target属性
- HTML Map 标签的使用
- HTML <form> 标签的 enctype 属性
- HTML转PDF+水印以及PDF+水印
- HTMl学习1
- html页面时间实例
- html图片预览