表单语法
<form action="result.html" method="post">
<input type="..." name="..." value="...">
</form>
action表示向何处发送表单数据
method规定如何发送表单数据,常用值:get/post
表单元素格式
属性 | 说明 |
---|---|
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、文本框
代码:
<input type="text" name="userName" value="chenxingjies" size="20"/>
网页效果图:
2、密码框
代码:
<input type="password" name="password" maxlength="20"/>
网页效果图:
3、单选按钮
代码:
<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
网页效果图:
4、复选框
代码:
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked/>聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
网页效果图:
5、列表框
代码:
<select name="job">
<option value="teacher">教师</option>
<option value="student">学员</option>
<option value="worker">工人</option>
<option value="encourager">鼓励师</option>
<option value="wise" selected>巫师</option>
<input type="submit">
</select>
网页效果图:
6、按钮
重置按钮
代码:
<input type="reset" name="butreset" value="重置"/>
网页效果图:
提交按钮
<input type="submit" name="butsubmit" value="提交"/>
网页效果图:
普通按钮
代码:
<input type="button" name="butButton" value="按钮"/>
网页效果图:
图片按钮
代码:
<input type="image" src="img/img1.png"/>
网页效果图:
图片就是一个按钮的作用
7、多行文本域
代码:
<textarea name="showtext" cols="10" rows="10">文本内容</textarea>
网页效果图:
8、文件域
代码:
<form action="#" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
网页效果图:
9、邮箱
代码:
<p>邮箱:<input type="email" name="email"/></p>
网页效果图:
会自动验证email地址格式是否正确
10、网址
代码:
<p>请输入你的网址:<input type="url" name="userUrl"/>
<input type="submit"/></p>
网页效果图:
会自动验证URL地址格式是否正确
11、数字
代码:
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/>
<input type="submit"/></p>
网页效果图:
12、滑块
代码:
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/>
<input type="submit"/></p>
网页效果图:
13、搜索框
代码:
<p>请输入搜索的关键词:<input type="search" name="sousuo"/>
<input type="submit"/></p>
网页效果图: