表单

一.表单语法

<form action="result.html" method="post">
<input type="..." name="..." value="...">
</form>

action表示向何处发送表单数据
method规定如何发送表单数据，常用值：get/post
(实际网页开发中通常采用post方式)

二.表单元素格式

<input type="..." name="..." value="..."/>

属性	说明
type	指定元素的类型。text，password，checkbox，radio，submit，reset，file，email，url，image，button，search，textarea，hidden，默认为text
name	指定表单元素名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

三.表单元素

1.文本框(text)

<input type="text" name="userName" value="用户名" size="20" maxlength="5"/>
效果图

2.密码框(password)

<input type="password" name="pass" maxlength="5"/>
效果图

3.单选按钮(radio)

<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
效果图

4.复选框(checkbox)

<input type="checkbox" name="interest" value="sports" checked>体育
<input type="checkbox" name="interest" value="draw">绘画
<input type="checkbox" name="interest" value="sing">唱歌

效果图

5.列表框(select)

<select name="singer" size="4">
<option value="liyifeng" selected="selected">李易峰</option>
<option value="chenyixun">陈奕迅</option>
<option value="wuyuetian">五月天</option>
<option value="zhoujielun">周杰伦</option>
</select>

name：列表名称
size：行数
value：选项的值

效果图

6.按钮(reset,submit,button,image)

重置按钮(reset)

<input type="reset" name="butresert" value="重置">
效果图

提交按钮(submit)

<input type="submit" name="butsubmit" value="提交">
效果图

普通按钮(button)

<input type="button" name="butbutton" value="点我登陆">
效果图

图片按钮(image)

<input type="image"src="1.jpg">
src:图片的路径

效果图

7.多行文本域(textarea)

<textarea name="showtext" cols="3" rows="5">文本内容</textarea>
cols:显示的列数
rows:显示的行数
效果图

8.文件域(file)

<form action="#" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

enctype="multipart/form-data"表单编码属性
效果图

9.邮箱(email)

<input type="email" name="email" >
效果图

10.网址(url)

<input type="url" name="userurl" >
(会自动验证url地址格式是否正确)

效果图

11.数字(number)

<input type="number" name="num" min="0" max="10" step="1">
min:允许的最小值
max:允许的最大值
step:数字间隔
效果图

12.滑块(range)

<input type="range" name="range1" min="0" max="10" step="2">
效果图

13.搜索框(search)

<input type="search" name="sousuo">
效果图

四.表单的高级应用

1.隐藏域(hidden)

语法

<input type="hidden" value="666" name="userid">
隐藏，提交有效

2.只读(readonly)

<input name="name" type="text" value="张三" readonly>
只读，不可写，但提交有效

3.禁用(disabled)

<input type="submit " disabled value="保存" >
该input无效化

五.表单的初级验证

placeholder

提示

<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>

required

必填项，规定文本框填写内容不能为空，否则不允许用户提交表单

<input type="text" name="username" required/>

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

六.总结