form表单的简单用法

2017-05-27  本文已影响0人  agui526

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

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

属性说明:

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

表单元素的常用类型
<input type = “text” name=“名称”/>

属性

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

<textarea cols="digit" rows="digit" name="name" disabled="disabled" 
readonly="readonly" warp="value">默认值
</textarea>

属性:

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

<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>

属性:

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

<input type=“password” name=“名称”/>
<input type=“radio” name=“gender” value=“male”/> 
<input type=“radio”  name=“gender” value=“female”/>
<input type="checkbox" name="" value="dota">dota
<input type="checkbox" name="" value="旅游" checked>旅游
<input type="checkbox" name="" value="宠物" checked>宠物
<input type=“reset” value=“重置按钮"/>
<input type=“button” value=“普通按钮"/>
<input type="submit" value="提交"/>
<input type="image" src="">
<input type="file" name="" accept="定义上传文件类型">
<input type=“hidden” name=“隐藏域”/>
上一篇 下一篇

猜你喜欢

热点阅读