form表单的简单用法

表单用于向服务器传输数据,在网页里就是一个存放控件的地方,如文本框,密码框,按钮之类的,这些控件叫做表单元素。

定义:
<form action="url" method="get|post" name="name" onSubmit="" target="">
<!-- 各种表单元素 -->
</form>

属性说明:

action属性:改属性用来指定处理表单数据程序的URL地址。
method属性:改属性用来指定数据传送到服务器的方式。有两种属性值,get和post
name属性:指定表单的名称,可自定义
onSubmit属性:指定当用户单击提交按钮时触发的事件。
target属性:指定输入数据结果显示在哪个窗口中,_blank标示在新窗口中打开目标文件;_self表示在同一个窗口中打开,该项一般不用设置;_parent表示在上一级窗口中打开,一般使用框架页时经常使用;_top表示在浏览器的整个窗口中打开,忽略任何框架。

表单元素的常用类型
  • text:文本框,<input type="text"/>(input 的type 属性的默认值就是"text")
<input type = “text” name=“名称”/>

属性

size:指定文本框的宽度,以字符个数为单位;在大多数浏览器中,文本框的缺省宽度是20个字符。
value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击<input type="reset"/>按钮之后在文本框中显示的值。
maxlength:指定用户输入的最大字符长度。
readonly:只读属性,当设置readonly属性后,文本框可以获得焦点,但用户不能改变文本框中的value。
disabled:禁用,当文本框被禁用时,不能获得焦点,当然,用户也不能改变文本框的值。并且在提交表单时,浏览器不会将该文本框的值发送给服务器。

  • textarea : 文本域
<textarea cols="digit" rows="digit" name="name" disabled="disabled" 
readonly="readonly" warp="value">默认值
</textarea>

属性:

name:指定多行文本框名称,表单提交后,在服务器端获取表单数据时应用
cols:指定多行文本框显示的列数(宽度)
rows:指定多行文本框显示的行数(高度)
disabled:指定多行文本框不可使用(变灰)
readonly:指定当前多行文本框只读
warp:设置选中的文字是否自动换行:可选值:hard:默认值,自动换行,提交到服务器时换行符同时被提交;soft:自动换行,但是换行符不被提交;off“:不自动换行

  • select : 下拉选择框
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>

属性:

name:列表框的名称
size:显示的选项数量,超出通过拖动滚动条查看
disabled:指定列表框不可用
multiple:用于让多行列表框支持多选

  • password:密码框
<input type=“password” name=“名称”/>
  • radio: 单选按钮
<input type=“radio” name=“gender” value=“male”/> 
<input type=“radio”  name=“gender” value=“female”/>
  • checkbox : 复选框
<input type="checkbox" name="" value="dota">dota
<input type="checkbox" name="" value="旅游" checked>旅游
<input type="checkbox" name="" value="宠物" checked>宠物
  • reset:重置按钮
<input type=“reset” value=“重置按钮"/>
  • button:普通按钮
<input type=“button” value=“普通按钮"/>
  • submit:提交按钮
<input type="submit" value="提交"/>
  • image:图片
<input type="image" src="">
  • file : 文件上传
<input type="file" name="" accept="定义上传文件类型">
  • hidden : 隐藏域
<input type=“hidden” name=“隐藏域”/>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、form表单有什么作用? 表单的作用: 表单在网页中主要负责数据采集功能,把用户填写的信息提交到网站的后台服务...
    沈檀Senta阅读 1,928评论 0 0
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 920评论 0 1
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 924评论 0 1
  • form简介 是HTML中的一个元素,它表示文档中的一个区域,这个区域包含了交互控件,用于向web服务器提交信息。...
    七里之境阅读 1,354评论 0 1
  • 例如document.onclick=function(ev){ var oEvent = ev || event...
    BrightenSun阅读 932评论 1 2