#转载请留言联系
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
1、<form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式,一般有“get”方式和“post”方式
2、<label>标签 label 标签不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
3、<input>标签 定义通用的表单元素
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- value属性 定义表单元素的值
- name属性 定义表单元素的名称,此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <!--action 定义表单数据提交地址--> <form action="http://www.baidu.com" method="post"> <!--单行文本框--> <input type="text" name="username" placeholder="请输入账号"><br><br> <!--密码框--> <input type="password" name="password" placeholder="请输入密码"><br><br> <!--单选框--> 性别:<label><input type="radio" name="sex" value="1">男</label> <label><input type="radio" name="sex" value="2">女</label> <!--多选框--> <br><br> 最喜欢的游戏: <label><input type="checkbox" name="fav" value="LOL">英雄联盟</label> <label><input type="checkbox" name="fav" value="shoot">喷射战士</label> <label><input type="checkbox" name="fav" value="zelder">塞尔达传说</label> <label><input type="checkbox" name="fav" value="mario">马里奥</label> <!--上传图片--> <br><br> <input type="file" name="pic"> <!--多行文本框--> <br><br> <textarea name="text" cols="30" rows="10"></textarea> <!--下拉列表--> <br><br> <select name="city"> <option value="gz">广州</option> <option value="sz">深圳</option> <option value="zh">中山</option> </select> <!--提交表单--> <input type="submit" value="提交"> <!--重置表单--> <input type="reset" value="重置"> </form> </body> </html>