标签的学习
<!--
form标签
表单标签,块级元素,会自动换行
将数据传递给服务器
常用属性
action 表单提交的地址url
id 唯一标识
name 名称
terget 表单提交打开方式(当前窗口)
method 提交方式
get请求
参数会直接跟在url后面,用问号拼接
安全性差,传递的数据量小,效率高(是post速度的两倍),有缓存
post请求
参数不会跟在url地址栏后面,会放在请求体中
安全性高,传输数据量大,速度相对来说慢,无缓存
-->
<!--
input元素
type 表单元素的类型
text 文本框
password 密码框
radio 单选框(需要设置一组相同的name属性值)
checkbox 复选框(需要设置一组相同的name属性值)
button 普通按钮
hidden 隐藏域(用于存放需要传递给服务器,但不需要显示的数据)
file 文件域(上传文件)
date 日期框
submit 提交按钮
reset 重置按钮
image 图片按钮(提交按钮)
value 表单元素的值
checked 是否选中(单选框/复选框)
disabled 是否禁用
maxlength 允许输入的最大字符
textarea文本域
cols rows
label标签
设置label标签的for属性值和表单元素的id属性值相对应,当点击label标签时,会自动给表单元素聚焦
与id对应
button按钮
type
button普通按钮
submit提交按钮(默认值)
reset重置按钮
select下拉选框
<select>
<option value="">content</option>
</select>
常用属性
disabled 禁用
multiple 可多选
name 规定名称
size 规定下拉框的列表可见选项的数目
selected 默认选中
value 设置值
注:当option设置了value属性值时,提交的数据是value对应的值
如果未设置value,则提交的数据是文本值
-->
编号: <input type="hiddle" name="userid" value="1" /><br>
姓名: <input type="text" name="userfirst" value="zhangsan" /><br>
<label for="userpw"> 密码: <input type="password" id="userpw" name="密码" maxlength="6" /><br>
性别:男:<input type="radio" name="性别" value="man" checked="checked"/>
女:<input type="radio" name="性别" value="woman" /><br>
爱好:唱歌: <input type="checkbox" name="唱歌" value="sing" /><br>
跳舞: <input type="checkbox" name="跳舞" value="dance" checked /><br>
说唱: <input type="checkbox" name="说唱" value="rap" disabled="disabled"/><br>
生日: <input type="date" name="birthday" /><br>
头像: <input type="file" name="头像" /><br>
简介:<textarea name="remark" rows="10" cols="50">111111</textarea><br>
城市:
<select name="city" multiple="multiple" size="4">
<option value="">请选择城市</option>
<option value="beijing" disabled="disabled">北京</option>
<option value="shanghai" selected="selected">上海</option>
<option value="hangzhou">杭州</option>
<option value="shangqiu">商丘</option>
</select>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="普通" />
<input type="image" src="img/logo.png" /><br>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
运行截图