Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源。

掌握表单(Form)有以下几个要点:

重要form属性

form常用控件

form提交方式

§  重要form属性

action {URL}:规定表单提交时向何处发送数据。

enctype :规定在发送表单数据之前如何对表单数据进行编码。(值如下)

       application/x-www-form-urlencoded :在发送前编码所有字符(默认为此方式)。

         multipart/form-data :不对字符编码。 注:使用包含文件上传控件的表单时,必须使用该值。

method:指定表单以何种方法发送。

        get :from表单里所填的值,附加在action指定的URL后面,做为URL链接而传递。(可以在地址栏看见表单的提交信息)

        post :from表单里所填的值,附加在HTML Headers上。(不可以在地址栏看见表单的提交信息)

§  form常用控件

<label>标记:

  <label>标记为input元素定义标注,它的for 属性应当与相关元素的id属性相同。绑定后单击该文字,鼠标将聚焦到绑定的表单控件上。

   建议:每一个表单元素的文字描述都使用<label>标记 !(<label></label>两标签之间的内容即为对绑定的表单控件的文字描述)

   注意:每个表单元素应当分配 name 属性 和 id 属性。( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)

      name 属性:用来将数据提交到服务器;

      id 属性:用来在客户端做相应的操作;如:<label>标签的绑定、CSS 选择器的使用等。

文本输入框:         

1)、input type="text" 单行文本框

<label  for= "Account">账号:</label>
<input type="text" name="Account" id="Account" value="账户" maxlength="20">

2)、textarea 多行文本框

<label for="comment">评论:</label>
<textarea name="comment" id="comment" cols="30" rows="15" maxlength="100"></textarea>

说明: maxlength 规定文本区域的最大字符数;如果在<textarea> 中输入字符时,换行也算一个字符。

密码输入框:

  定义密码字段。(字符会被遮盖)

<label  for= "Password">密码:</label>
<input type="password" name="password" id="password" value="密码">

单选框:

设置单选按钮 以及获取选中的单选按钮的值

<form name="MyForm" action="URL" method="post">
  <p>性别:
   <input type="radio" name="sex" id="male" value="male"><label for="male">male</label>
   <input type="radio" name="sex" id="female" value="female"><label for="female">female</label>
  </p>
  <input type="button" value="获取选中项" onclick="getValue();" />
</form> //获取选中的单选值
<script language="javascript">
function getValue(){
//获取表单的所有提交信息(根据表单的name属性)
var myform = document.forms["MyForm"];
//sex是单选按钮的name属性值
var radioChoices = myform.sex;
//遍历整个单选项表
for(i=0;i<radioChoices.length;i++)
if(radioChoices[i].checked)
break; //发现了被选中项,退出
alert("选中的选项是:"+radioChoices[i].value);
}
</script>

注意:

1)、在客户端,Javascript 对表单及表单元素的操作,更常用其name 属性而不是id属性。因为,对于某些特定的表单元素(如:单选按钮等),使用其name 属性更易于获得元素值,也更方便向服务器传送数据!

2)、保证同一组单选按钮的name 属性值相同。

复选框:

复选框的“全选”、“全不选”、“反选”功能 以及 所选复选框值的获得功能

<form name="MyForm" action="URL" method="post">
  <input type="checkbox" name="hoboy" id="music"><label for="music">music</label>
  <input type="checkbox" name="hoboy" id="swim"><label for="swim">swim</label>
  <input type="checkbox" name="hoboy" id="dance"><label for="dance">dance</label>   <input type="button" value="全选" onclick="selectBoxs(1);" />
  <input type="button" value="全不选" onclick="selectBoxs(0);" />
  <input type="button" value="反选" onclick="selectBoxs(-1);" />
  <input type="submit" value="提交" onclick="submit();" />
</form> <script language="javascript"> //全选,全部选,反选
function selectBoxs(value){
var myform = document.forms["MyForm"];
//hoboy 为所有复选框的name属性值
var CheckboxChoices = myform.hoboy; for(var i=0;i<CheckboxChoices.length;i++) //遍历每一个选项
if(value < 0)//反选
CheckboxChoices[i].checked = !CheckboxChoices[i].checked;
else
//value为1是则全选,为0时则全不选
CheckboxChoices[i].checked = value;
} function getSelect(){
var myform = document.forms["MyForm"];
var CheckboxChoices = myform.hoboy;
  //创建数组放checkbox选中的值
var arrayCheckbox = new Array();
for(var i=0;i<CheckboxChoices.length;i++){
  if(CheckboxChoices[i].checked)
    arrayCheckbox.push(CheckboxChoices[i].value);
}
alert(arrayCheckbox);
} </script>

注意:保证同一组复选框按钮的name 属性值相同。

下拉框:

下拉框的重要属性:

multiple 属性:用于设置下拉表框的类型(多选还是单选)

type 属性:JS根据type 属性的值获得下拉列表框select 控件的类型。

type 属性的值为:select-multiple(多选) 或 select-one(单选)

下拉列表框默认只能选中一项,若要设置为可以多选,则设置<select multiple = "multiple"> 即可。

size属性:定义可见选项的数目。size="3",即下拉框内可以显示三个可选选项。

<form name="MyForm" action="URL" method="post">
  <p>简单的选择列表</p>
  <select id="myselect" name="myselect" multiple="multiple" size="3">
<option value="Apples">Apples</option>
<option value="Bananas">Bananas</option>
<option value="Cherries">Cherries</option>
<option value="oranges">oranges</option>
</select></br>
  <input type="button" onclick="getSelectValue('myselect')" value="查看选项" />
</form> <script language="javascript">
//获取选中的下拉列表值
function getSelectValue(myselect){
var myform = document.forms["MyForm"];
var select = myform.elements[myselect];
//判断是单选还是多选
if(select.type == "selece-one"){
var oneChoice = select.selectedIndex;//获取选中项
alert("单选" + select.options[oneChoice].value);//获取选中项的值
}
else{
var multiChoices = new Array();
//遍历整个下拉菜单
for(var i=0;i<select.options.length;i++)
if(select.options[i].selected)
multiChoices.push(select.options[i].value);
alert("多选" + multiChoices);
}
}
</script>

提示:

在不同操作系统中,选择多个选项的差异:

  • 对于 windows:按住 Ctrl 按钮来选择多个选项
  • 对于 Mac:按住 command 按钮来选择多个选项

由于上述差异的存在,同时由于需要告知用户可以使用多项选择,对用户更友好的方式是使用复选框。

§  form提交方式

表单的提交方式由method属性的取值决定,所以form提交方式有以下两种:

 get 方式:

表单数据将会追加action指定的URL后面,做为URL链接而传递(以查询字符串的形式提交到服务端)。

变量提交的样式为:html元素的name属性=提交的值。多个变量,在URL链接后面以 & 符号隔开。

 post方式:

表单数据将附加在请求体(HTML Headers)上被发送出去,并不附加在URL链接后面。

建议:表单通常还是以post方式提交比较好,这样可以不破坏URL,况且URL还有长度限制。

get 与 post 的区别:

1)、get是从服务器上获取数据;post是向服务器传送数据

2)、数据的查询:比如浏览论坛或博客时,URL一般包含了分类、页码数、每页记录数等信息。 get 方式,能一目了然的看到所要查询的信息; post 因为隐藏掉了这些信息,不方便进行查询。

3)、数据安全性:对一项记录,进行更改、添加操作时,get 方式附加在URL上,会泄露数据;post 方式,能隐藏数据,保证数据的安全性。

4)、数据传输量:get 虽然方便查询,但由于是附加在URL上,使得其传送的数据量较小,不能大于2KB;post传送的数据量较大,一般被默认为不受限制。

资源链接

推荐 :更多代码详解,请转到代码仓库:https://github.com/Tina-xy/HTML

推荐 : Fish Li 博主的 ---- 细说Form(表单)  

http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html

HTML ------ 关于表单 Form的更多相关文章

  1. Bootstrap~表单Form

    回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...

  2. 表单 - Form - EasyUI提供的表单异步提交

    方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...

  3. 跟服务器交互的Web表单(form)

    使用HTML来构建可以跟服务器交互的Web表单(form),通过给你的form元素添加一个action属性来达到此目的. action属性的值指定了表单提交到服务器的地址. 例如: <form ...

  4. 3、网页制作Dreamweaver(表单form)

    表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" ac ...

  5. DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

    绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...

  6. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  7. 微信小程序基础之表单Form的使用

    表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","i ...

  8. HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  9. 表单<form></form>提交方式的区别

    <form action="" method="get/post"> 表单<form></form>的提交方式有两种:pos ...

随机推荐

  1. C#~异步编程续~.net4.5主推的await&async应用

    返回目录 之前写过两篇关于异步编程的文章,详细可以进入C#~异步编程和C#~异步编程在项目中的使用 .net的各个版本都有自己主推的技术,像.NET1.1中的委托,.NET2.0中的泛型,.NET3. ...

  2. [Cordova] Plugin里使用iOS Framework

    [Cordova] Plugin里使用iOS Framework 前言 开发Cordova Plugin的时候,在Native Code里使用第三方Library,除了可以加速项目的时程.也避免了重复 ...

  3. [deviceone开发]-一个简单的表单示例

    一.简介 这个例子我们用do_ScrollView+do_LinearLayout来实现,当没有输入相关的值而去保存的时候,则把隐藏的几个提示Label显示出来,然后调用do_LinearLayout ...

  4. 弹出页面遮罩层,以及web端和移动端阻止遮罩层的滑动。

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...

  5. 详解JavaScript中的this

    JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不 ...

  6. UIImageView

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. /***** ...

  7. SCRIPT5011:不能执行已释放Script的代码

    环境:win7 64位 IE9 错误:SCRIPT5011:不能执行已释放Script的代码. 现象:在父窗体的close()中调用嵌套的iframe页面的js方法返回一个对象时抛此异常. 原因:在一 ...

  8. 【原】Github系列之三:开源iOS下 渐变颜色的进度条WGradientProgress

    概述 今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移 ...

  9. android性能优化练习:过度绘制

    练习:https://github.com/zhangbz/AndroidUIPorblems 查看过度绘制 在开发者选项中开启"调试GPU过度绘制" 判断标准 无色:没有过度绘制 ...

  10. ORACLE优化器RBO与CBO介绍总结

    RBO和CBO的基本概念 Oracle数据库中的优化器又叫查询优化器(Query Optimizer).它是SQL分析和执行的优化工具,它负责生成.制定SQL的执行计划.Oracle的优化器有两种,基 ...