欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  本篇文章主要介绍用如何用html标签制作表单实例,属于HTML中必须要掌握的知识点之一。感兴趣的朋友参考下,希望对大家有所帮助。
 
  表单标签:form
 
  表单标签的主要作用是:在HTML页面中创建一个表单,在用户填写完表单信息后,将数据提交给服务器。需要填写数据的标签必须要放在表单标签体里面。
 
  常用的属性:
 
  action:请求路径,在该属性中确定表单数据提交的服务器地址。
 
  method:请求方式。常用的请求方式有:get,post。
 
  get(默认):1.get的请求的数据有限
 
  2.提交的表单数据是追加在请求的路径上,如:regist.action?username=jack&password=1111。
 
  追加是在请求地址的后面加上?连接。之后每一对数据使用&连接。
 
  post:1.提交的数据不在请求路径上追加,不显示在地址栏上。
 
  2.理论上,post请求的数据量是无限的。
 
  输入域标签:input
 
  
 
  输入域标签用于获得用户输入的信息,type属性的值不同,获取的方式也就不一样。
 
  常用属性:
 
  type属性
 
  text:文本框,单行输入字段,用户可以在其中输入文本,
 
  password:密码框,该输入框中的输入字符将会以黑圆显示。
 
  radio:单选框,表示一组互斥选项按钮中的一个,当一个按钮被选中,之前的按钮就会变为非选中。
 
  checkbox:多选按钮。
 
  file:文件上传组件
 
  hidden:隐藏字段,数据会发送给服务器,但浏览器不会显示。
 
  reset:重置按钮,将表单恢复到默认值。
 
  submit:提交按钮,提交按钮会把表单数据发送到服务器。
 
  name属性:元素名,必须要提供name属性,表单数据才会提交到服务器中。服务器通过该值来获取数据。
 
  value属性:设置input标签的默认值,
 
  size属性:设置输入框的大小
 
  checked属性:单选框或复选框被选中。
 
  readonly:是否只读。
 
  disable:是否可用。
 
  下拉列表标签:select
 
  下拉列表标签,提供一些选项,来选中其中的一项或多项。需要配合子标签<option>来使用。
 
  name属性:设置名称,必写项。
 
  multiple属性:不写默认单选,取值为multiple表示多选。
 
  size属性:多选时,可见的选项数目。
 
  子标签<option>:下拉列表中的一个选项
 
  selected:选中当前的列表项。
 
  value:发送给服务器的选项值。
 
  示例代码:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>表单标签</title>
 
  </head>
 
  <body>
 
  <!--要提交到服务器中的所有信息,必须要用form标签包裹起来-->
 
  <form>
 
  <!--文本输入项-->
 
  用户名:<inputtype="text"name="usernam"/><br/>
 
  <!--密码项-->
 
  密&nbsp;码:<inputtype="password"name="password"/><br/>
 
  确认密码:<inputtype="password"name="password2"/><br/>
 
  <!--单选按钮-->
 
  性别:<inputtype="radio"name="sex"/>男
 
  <inputtype="radio"name="sex"/>女<br/>
 
  <!--多选按钮-->
 
  兴趣爱好:<inputtype="checkbox"name="hobby"/>写博客
 
  <inputtype="checkbox"name="hobby"/>写代码
 
  <inputtype="checkbox"name="hobby"/>看源码<br/>
 
  <!--文件选项-->
 
  文件:<inputtype="file"name="file"/><br/>
 
  <!--下拉列表标签-->
 
  居住城市:<selectname="city">
 
  <option>--请选择--</option>
 
  <option>北京</option>
 
  <option>上海</option>
 
  <option>广州</option>
 
  </select><br/>
 
  <!--提交按钮-->
 
  <inputtype="submit"value="提交按钮"/><br/>
 
  <!--普通按钮-->
 
  <inputtype="button"value="普通按钮"/><br/>
 
  <!--重置按钮-->
 
  <inputtype="reset"value="重置"/><br/>
 
  </form>
 
  </body>
 
  </html>


 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h55018.shtml