<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11.表单标签.html</title>
</head>
<body>
<!--form表单
ation属性:相当于超链接中的href属性
本地资源，网络资源
method属性: 表单的提交方式
get 默认:将表单中数据显示在地址栏中
post 将表单中数据隐藏
label:没有意义的标签，一般情况下用于表单
input标签:
type属性:
text表示文本框
password表示密码框
submit：提交按钮,点击提交按钮表单和表单中的数据会一块提交给action属性中的目标
reset:重置按钮，会让页面还原第一次打开时界面
button:普通按钮，没有任何功能,需要和Javascript语言结合
radio:单选按钮
checkbox:多选按钮
number:只能输入数字
date:年月日
time:时分
email:邮箱
file:上传(如果需要完成上传，需要服务器的后台处理，需要流技术)
hidden:隐藏组件不显示
select标签:下拉组件,下拉选
option子标签
textarea标签：文本域，多行文本框
size属性:组件长度
maxlength:组件中的字符个数
disabled:组件不可用,表单提交时数据不会提交
readonly:组件只读,表单提交时数据会正常提交
value：表示组件中的数据值
placeholder:提示信息
本身没有作用的三个属性:
name:为标签定义一个名称(自定义名称,后期的servlet技术中需要使用该属性)
id:为标签定义一个编号(自定义名称,该编号在html文件中不允许重复
css,javascript,jquery...会使用)
class:为标签定义一个类别(自定义名称,css,javascript,jquery...会使用)
-->
<form action="http://www.jd.com" method="get">
<label>账号:</label>
<input type="text" size="30px" maxlength="20"
placeholder="请输入账号" name="username" id="username2" class="username3"
value="张三" readonly
/><br />
<label>密码:</label>
<input type="password" placeholder="请求输入密码" name="password" /><br />
<label>性别:</label>
<!--多个选项中的name值一致，为一组，一组中只能选择一个
checked：默认选中,页面打开默认选中一个值
-->
<input type="radio" name="sex" value="男1" />男
<input type="radio" name="sex" value="女1" checked />女
<input type="radio" name="sex" value="未知" />未知
<br />
<label>爱好:</label>
<input type="checkbox" name="hobby" value="编程1" />编程
<input type="checkbox" name="hobby" value="游戏1" />游戏
<input type="checkbox" name="hobby" value="读书1" />读书
<input type="checkbox" name="hobby" value="旅游1" />旅游
<input type="checkbox" name="hobby" value="吃饭1" />吃饭
<br />
<label>数字:</label>
<input type="number" name="number" /> <br />
<label>日期:</label>
<input type="date" name="date" /> <br />
<label>时间:</label>
<input type="time" name="time" /> <br />
<label>邮箱:</label>
<input type="email" name="email" /> <br />
<label>上传:</label>
<input type="file" name="file" /> <br />
<label>隐藏域:</label>
<input type="hidden" name="id" value="123" /> <br />
<label>部门:</label>
<select name="dept">
<option value="技术部1">技术部</option>
<option value="财务部1">财务部</option>
<option value="销售部1">销售部</option>
<option value="后勤部1">后勤部</option>
</select> <br />
<label>说明:</label>
<textarea rows="20" cols="20"></textarea> <br />
<!-- html中存在三个按钮
submit：提交按钮,点击提交按钮表单和表单中的数据会一块提交给action属性中的目标
reset:重置按钮，会让页面还原第一次打开时界面
button:普通按钮，没有任何功能,需要和Javascript语言结合
-->
<input type="submit" value="登录" />
<input type="reset" value="还原" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
浙公网安备 33010602011771号