HTML表单 Form

HTML表单<Form>

1.表单标签<form>……</form>

语法：

<form name="form_name" action="url" method="get|post">…</form>

Name ：定义表单的名称

Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；

Action ：用来指定表单处理程序的位置(服务器端脚本处理程序） 

2.文本框

是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式：

＜input type=“text” name=“...” size=“...” maxlength=“...” value=“...”＞

type=“text” 定义单行 文本输入框；

name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

size 属性定义文本框的宽度，单位是单个字符宽度；

maxlength 属性定义最多输入的字符数。

value 属性定义文本框的初始值

3.密码框

密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。

格式：

<input type=“password” name=“...” size=“...” maxlength=“...” >

4. 按钮

类型：普通按钮、提交按钮、重置按钮。

1)普通按钮

 当type 的类型为button 时，表示该输入项输入的是普通按钮。

 语法格式： 

1	< input  type = "button"  value = "…"  name = "..." >

Value: 表示显示在按钮上面的文字。   普通按钮经常和脚本一起使用。

2)提交按钮

通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。    

 示例：

1	< input  type = "submit"  value = "提交" >

3)重置按钮

当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。

语法格式： 

1	< input  type = "reset"   value = "..."  name = "..." >

5. 单选框和复选框

• 单选框

格式：<input type=“radio”name=“…” value=“…” checked> 

Checked: 表示此项默认选中

Value 表示选中后传送到服务器端的值。

Name 表示单选框的名称，如果是一组单选项，name 属性的值相同有互斥效果。

• 复选框

语法格式：<input type=checkbox name=“…” value=“…” checked >

Checked: 表示此项默认选中

Value 表示选中后传送到服务器端的值。

Name 表示复选框的名称，如果是一组单选项，name 属性的值相同亦不会有互斥效果。

6. 文件输入框

当type=“file”时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。

语法格式：<input type=“file” name=“…”>

7.下拉框 (Select) 

既可以用做单选，也可以用做复选。

单选例句如下  ：

<select name="fruit" >

<option value="apple"> 苹果

<option value="orange"> 桔子

<option value="mango"> 芒果

</select>

如果要变成复选，加multiple即可 。用户用Ctrl来实现多选。

<select name="fruit" multiple>，用户还可以用size 属性来改变下拉框的大小。 

8. 多行输入框(textarea)

多行输入框(textarea)主要用于输入较长的文本信息。例句如下

<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>

 其中cols 表示textarea 的宽度，rows 表示textarea 的高度。

实例1：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

< html > < head >< title >用户登记</ title ></ head > < body > < table  border = 3  width = 1000  height = 500  bordercolor = "#336699"  align = center > < tr > < td > < p  align = center >< font  size = 7  color = "#00ff00" >用户登记</ font ></ p >< hr  /> < p  align = center >亲爱的用户，欢迎您访问我们的网站，请填写您的个人信息，便于我们及时与您联系。</ p > < form > < p >姓名：< input  type = text  name = xing  ming>< br  />< br  /> 年龄：< input  type = text  name = nian  ling>< br  />< br  /> 性别：< input  type = radio  name = xingbie  value = femal  checked>男        < input  type = radio  name = xingbie  value = mal >女</ p > < p >文化程度：< select  name = wnhua  size = 1 > < option  value = "xiaoxue"  selected>小学 < option  value = "高中" >高中 < option  value = "大学" >大学 </ select > 职业：< select  name = zhiye > < option  value = yiliao  selected>医疗 < option  value = gongwuyuan >公务员 < option  value = zaiduxuesheng >在读学生 </ select > e-mail:< input  type = text  name = mail ></ p > < p >你的爱好：</ p > < p >< input  type = checkbox  name = aihao  value = dian >电影 < input  type = checkbox  name = aihao  value = di 是an>运动 < input  type = checkbox  name = aihao  value = ddan >音乐 < input  type = checkbox  name = aihao  value = dddan >跳舞 </ p > < p >< input  type = checkbox  name = aihao  value = diasan >阅读 < input  type = checkbox  name = aihao  value = diawqn >上网 < input  type = checkbox  name = aihao  value = diasn >聊天 < input  type = checkbox  name = aihao  value = disdan >交友</ p > < p  >< input  type = submit  value = "提交" > < input  type = reset  value = "全部重写" ></ form > </ td ></ tr > </ table > </ body > </ html >

实例2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

< html > < head >< title >个人设置</ title > </ head > < body > < form > < font  size = 7  color = red >个人设置——个人资料</ font > </ form > < form > 用户号码：< input  type = text  name = a1 ></ form >< form > 用户昵称：< input  type = text  name = a2 ></ form >< form > 个性签名：< input  type = textarae  name = c1  rows = 3  cols = 45 > </ form > < form > < input  type = checkbox  name = s1  value = location >显示我的地理位置 < input  type = checkbox  name = s2  value = do >打开“我在收听的音乐” 性别：< select  name = d1 > < option  value = nan  selected>男 < option  value = nv >女 </ select > 姓名：< input  type = text  name = as1 > 年龄：< input  type = text  name = ass1 ></ form >< form > 毕业院校：< input  type = text  name = ads1 > 生肖：< select  name = dd2 > < option  value = long  selected>龙 < option  value = ma >马 < option  value = yang >羊 < option  value = ji >鸡 < option  value = gou >狗 < option  value = tu >兔 < option  value = zhu >猪 </ select ></ form >< form > 职业：< select  name = ddd2 > < option  value = education  selected>教育业 < option  value = student >学生 < option  value = cook >厨师 < option  value = barber >发型师 < option  value = doctor >医疗业 </ select > 星座：< select  name = dasd2 > < option  value = shuiping   selected>水瓶座 < option  value = moxie >魔蝎座 < option  value = chunv >处女座 < option  value = tianping >天平座 < option  value = juxie >巨蟹座 </ select ></ form >< form > 个人主页：< input  type = text  name = ada1 > 血型：< select  name = dad2 > < option  value = o   selected>O型 < option  value = b >B型 < option  value =a>A型 < option  value = ab >AB型 < option  value = other >其他 </ select ></ form >< form > 个人说明：< input  type = textarae  name = c3  rows = 3  cols = 45 ></ form >< form > &nbsp;&nbsp;&nbsp;< input  type = button  value = "确定" >&nbsp;&nbsp;&nbsp; < input  type = submit  value = "应用" >&nbsp;&nbsp;&nbsp; < input  type = reset  value = " 取消" ></ form > </ body > </ html >