第8章 表单

8.1 表单标记<form>
<form name="表单名称" method="提交方法" action="处理程序">......</form>
关于表单的更多介绍:http://www.cnblogs.com/polk6/archive/2013/06/08/3124228.html
 
☟ 表单属性:
◆ action:用于指定表单的服务端程序,规定当提交表单时,向何处发送表单数据。action取值为:第一,一个URL(绝对URL/相对URL),一般指向服务器端一个程序,程序接受到表单提交过来的数据(即表单元素值)作相应处理。比如:
 
当用户提交这个表单时,服务器将执行网址"http://i.blog.sina.com.cn//"上的名为"reg.ashx"的一般处理程序。第二,使用mailto协议的URL地址,这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的,因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。第三,空值,如果action为空或不写,表示提交给当前页面。
 
◆ method:该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。最常用的是get和post,默认时使用 get方法。
get 与 post 有什么区别呢
① 数据的查询:比如浏览论坛时,URL一般包含了分类、页码数、每页记录数等信息。 get 方式,能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息,不方便进行检验查询条件。
② 敏感数据的提交(安全性):对一项记录,进行更改、添加操作时,比如注册用户、更改用户资料等。get 方式附加在URL上,会泄露掉敏感的消息。 post 方式,能隐藏掉敏感的信息。
demo:
用get方式点击提交后:URL变为:http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456
用post方式点击提交后:URL变为:http://localhost:4778/ashx/login.ashx  ☜可看到只是action指定的URL,参数并没有附加在URL后面。
③ 大数据文本传递:get 虽然方便查询,但由于是附加在URL上,各浏览器对URL也有个长度限制。IE :2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。
 
◆ onsubmit:用于指定处理表单的脚本函数
◆ enctype:设置MIME类型,默认值为 application/x-www-form-urlencoded。需要上传文件到服务器时,应将该属性设置为 multipart/form-data
 
8.2 输入标记<input>
多数表单元素都可使用 input 定义,为了标识每一个数据,我们需要给表单元素添加name属性,所以name为必设属性,name="域名称"
 
(1)文本框text
输入信息以明文显示
用户名: <input type="text" name="user" />
以下是单行文本框的主要属性:
name(名称,在脚本中可作为标识获取数据),maxlength(设置在文本框中最多可输入的字符数),size(文本框长度,大约以字节为单位)
value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击重置按钮之后在文本框中显示的值。
readonly:只读属性,当设置readonly属性后,文本框可以获得焦点,但用户不能改变文本框中的value。
disabled:禁用,当文本框被禁用时,不能获得焦点,当然,用户也不能改变文本框的值。并且在提交表单时,浏览器不会将该文本框的值发送给服务器。
 
(2)密码框 password
以"*"或"●"符号回显所输入的字符,从而起到保密的作用
密码: <input type="password" name="pwd" />
(3)隐藏域 hidden
隐藏域不会被浏览者看到,它主要用于在不同页面传递域中所设定的值
<input type="hidden" name="hid" value="域值">
(4)文件域 file
文件域可以将本地文件上传到服务器端,文件上传没有默认值,利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。否则无法上传文件内容
<input type="file" name="photo">
(5)单选按钮 radio
在一组选项中进行单项选择,以一个圆框表示
使用方式:要实现单选功能,name值必须相等。使用name相同的一组单选按钮,不同radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独的判断。单选按钮的元素值由value属性显式设置,表单提交时,选中项的value和name被打包发送,不显式设置value。
性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/> <!-- 像这些用户不能填写的表单元素,我们需要设置一些值给用户进行选择。 -->
(6)复选按钮 checkbox
在一组选项中进行多项选择,以一个方框表示
爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
(7)提交按钮 submit
用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理
<input type="submit" name="按钮名称" value="按钮显示文本">
普通按钮 button
用于激发提交表单动作,配合JavaScript脚本对表单执行处理操作
<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
重置按钮 reset
用于清楚表单中所输入的内容,将表单内容恢复成默认的状态
<input type="reset" name="按钮名称" value="按钮显示文本">
图像按钮 image
按钮外形以图像表示,功能与提交按钮一样,具有提交表单内容的作用
<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
(8)选择列表标记<select>
8.1 选择列表:一次可以选择多个列表选项,且一次可以显示1个以上列表选项的选择列表
select 标记用于声明选择列表,option标记用于设置各个选项
<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
<option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项,可设置多个 -->
<option value="apple">苹果</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="grape" selected="selected">葡萄</option>
</select>
8.2 下拉列表:一次只能选择一个列表选项,且一次只能显示一个列表选项的选择列表,即size默认1不能设置 size和 multiple属性
<select name="area">
<optgroup label="国外"> <!-- <optgroup> 标签用于组合选项,即给选项分组类别,属性为label,指定选项组合名称 -->
<option value="1">华盛顿</option>
<option value="2">旧金山</option>
</optgroup>
<optgroup label="国内">
<option value="3">广州</option>
<option value="4">湛江</option>
</optgroup>
</select>
(9)文本域标记<textarea>
一般用于给用户填写备注信息或留言信息的多行多列文本区域
<textarea name="文本区域名称" rows="行数" cols="字符数">
...(此处输入的为默认文本,比如)请在此处输入备注信息
</textarea>
 
(10)<label> 标签:为 input 元素定义标注(标记)
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
注意:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。即为下面说的隐式的联系。
 
隐式和显式的联系:
标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label> 标签下的 for 属性命名一个目标表单 id,这样就是显式形式。
显式的联系
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
隐式的联系
<label>Date of Birth: <input type="text" name="DofB" /></label>
(11)fieldset 标签:把表单中元素组合起来,通俗的讲就是把表单围起来,顺便给个标题注释,看起来更规整。
基本语法:<fieldset> <legend>...</legend> <form>...</form> </fieldset>
demo:
<fieldset>
<legend>我最喜爱的:</legend>
<label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
<label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
<label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>
我最喜爱的: 计算机 旅游 购物

 

html表单---学习笔记03的更多相关文章

  1. HTML5表单学习笔记

    表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...

  2. JS表单学习笔记(思维导图)

    导图

  3. C++ GUI Qt4学习笔记03

    C++ GUI Qt4学习笔记03   qtc++spreadsheet文档工具resources 本章介绍创建Spreadsheet应用程序的主窗口 1.子类化QMainWindow 通过子类化QM ...

  4. OpenCV 学习笔记03 findContours函数

    opencv-python   4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...

  5. 机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理、源码解析及测试

    机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理.源码解析及测试 关键字:决策树.python.源码解析.测试作者:米仓山下时间:2018-10-2 ...

  6. OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓

    本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...

  7. SaToken学习笔记-03

    SaToken学习笔记-03 如果排版有问题,请点击:传送门 核心思想 所谓权限验证,验证的核心就是一个账号是否拥有一个权限码 有,就让你通过.没有?那么禁止访问! 再往底了说,就是每个账号都会拥有一 ...

  8. Redis:学习笔记-03

    Redis:学习笔记-03 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 7. Redis配置文件 启动 ...

  9. HTML表单学习

    HTML表单学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...

随机推荐

  1. IntelliJ IDEA对开发者的三大诱惑

    IntelliJ IDEA作为最聪明的Java开发工具,不在只是对Java语言的支持,其中还包括Scala,Groovy 和其他语言. 对于任何一个开发者,好的工具就是为提高开发效率的.那么Intel ...

  2. 警惕使用WebClient.DownloadFile(string uri,string filePath)方法

    原文:警惕使用WebClient.DownloadFile(string uri,string filePath)方法 WebClient.DownloadFile(string uri,string ...

  3. vs2010下载链接中国简体(中国含msdn)

    昨天一个朋友说vs2010中国版可下载,我开始不相信.只是周末.所以,我下载一试 果然,安装了中国版,原本msdn订户才能够下载,感谢朋友们上传. 文件名 cn_visual_studio_2010_ ...

  4. ASP.NET MVC应用程序使用axd格式文件

    ASP.NET MVC应用程序使用axd格式文件 axd格式文件,不管是在asp.net还是现在开发asp.net MVC应用程序,都是Insus.NET较喜欢使用的. 因为我们可以虚拟一个在应用程序 ...

  5. 【值得收藏】绘图工具Origin的学习资料汇编【可免费下载】

    Origin使用教程 Origin为OriginLab公司出品的较流行的专业函数绘图软件,是公认的简单易学.操作灵活.功能强大的软件,既可以满足一般用户的制图需要,也可以满足高级用户数据分析.函数拟合 ...

  6. Foundation 学习笔记

    笔记内容 学习笔记-段玉磊 Stanford course Foundation and Attributed Strings Dynamic binding id 是一个指向任何未知对象的指针,(t ...

  7. flume安装及配置

    Flume安装 介绍 Flume本身的安装比较简单(flume的介绍请参考http://blog.csdn.net/rzhzhz/article/details/7448633),安装前先说明几个概念 ...

  8. 静态页面调试JS出现跨域问题

    在chrome浏览器或者firefox浏览器里,由于安全限制的原因,本地调试JS,如果不配服务器环境而直接打开页面,那所有的AJAX操作会抛出下面错误: XMLHttpRequest cannot l ...

  9. Js中call apply函数以及this用法

    this介绍: C#里this关键字的意义比较确定的.JavaScript的this关键字,随着函数使用场合不同,this的值会发生变化,感觉用法比较混乱,所以,现在是有必要整理一下的时刻了! 总结一 ...

  10. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...