HTML的form表单标识用法学习培训实例教程

HTML中表单能够用来收集客户各种各样种类的键入信息内容。表单具体上是包括表模块素的地区,在这个地区中的各种各样元素的键入信息内容最后都将根据表单递交到程序流程脚本制作中。比如普遍的有效户登陆、申请注册、公布文章内容这些,全是根据表单递交到动态性程序流程开展解决的。本节关键讲述表单和表单的元素,有关怎样递交表单信息内容到动态性程序流程,将在之后的程序流程語言课中再来说述。
表单的地区是应用<form>标识界定表单的范畴,在<form></form>中的元素的值会被根据这个表单递交到对应的详细地址中。
 
键入信息内容
1般表单内多以应用<input>标识搜集客户的键入信息内容,其键入种类是由type决策的。
大部分状况下被用到的表单标识是键入标识(<input>)。键入种类是由种类特性(type)界定的。普遍的键入种类有文字域、单选按钮、复选框、往下拉菜单这些。
 
文字域
文字域能够为客户出示键入文本的作用,访问器会将文字域解译为1个矩形框框,客户将光标挪动到该框体,并点一下便可将光标挪动到框身体。客户能够在表单中输入字母、数据等內容。
文字域的界定方式是在<input>标识中为type特性设定text值

XML/HTML Code拷贝內容到剪贴板
  1. <form>  
  2. 文字域1:<input type=”text” name=”firstname” />  
  3. 文字域2:<input type=”text” name=”lastname” />  
  4. </form>  

访问器显示信息以下:

单选按钮
单选按钮大部分状况下出現在客户申请注册时录入材料的选项中,该种类多客户只容许客户挑选1项結果时应用。
单选按钮的界定方式是在<input>标识中将type特性的值设定为radio

XML/HTML Code拷贝內容到剪贴板
  1. <form>  
  2. <input type=”radio” name=”sex” value=”male” /> 男孩子   
  3. <input type=”radio” name=”sex” value=”female” /> 女生   
  4. </form>  

访问器中的显示信息为:

复选框
复选框可以让客户勾选一些对应的1个或好几个选项。普遍的1般是在客户登陆时,为客户出示记牢登陆帐号等作用。还可以在客户调研的网页页面中,收集客户的多项建议。
复选框界定方式是在<input>标识中将type特性的值设定为checkbox

XML/HTML Code拷贝內容到剪贴板
  1. <form>  
  2. <input type=”checkbox” name=”val1″ />  
  3. 前端开发发展者非常好   
  4. <input type=”checkbox” name=”val2″ />  
  5. 前端开发发展者1般   
  6. </form>  

访问器显示信息以下:

往下拉菜单
往下拉菜单在信息内容挑选上与单选相近,可是往下拉菜单能够容下更多的信息内容。而且往下拉菜单在挑选菜单值后能够实行附加的脚本制作。
往下拉菜单以<select>为起止标识,在select标识中的每个option标识全是往下拉菜单中的1个值。

XML/HTML Code拷贝內容到剪贴板
  1. <form>  
  2. <select name=”cars”>  
  3. <option value=”volvo”>Volvo</option>  
  4. <option value=”saab”>Saab</option>  
  5. <option value=”fiat”>Fiat</option>  
  6. <option value=”audi”>Audi</option>  
  7. </select>  
  8. </form>  

访问器显示信息:

递交按钮
递交按钮是每一个表单的必要构成一部分。客户将对应的信息内容录入结束后,必须根据点一下递交按钮开启姿势,将表单的值递交到下1个网页页面。当<form>标识中的action特性设定了对应的递交详细地址时,递交按钮会将该表单中得到的全部数据信息递交到这个详细地址的网页页面中。
递交按钮的界定方式是在input标识中将type的值设定为submit。下面之前端发展者的检索框为例,将递交详细地址设定为检索网页页面。

XML/HTML Code拷贝內容到剪贴板
  1. <form name=”input” action=”http://www.frontopen.com/” method=”get”>  
  2. 重要字:   
  3. <input type=”text” name=”s” id=”s” />  
  4. <input type=”submit” value=”检索” />  
  5. </form>  

访问器显示信息以下:

结语:本节只是对常见的表单前端开发合理布局元素开展基础的演试与解读。真实的表单应用多在服务器程序流程語言中应用,而且必须设定更多的主要参数与标准。本课广州中山大学家只必须掌握表单的各元素完成排序便可,大部分状况下早已基础能够相互配合后台管理程序流程员进行网站开发设计。