- form标签
<!--
form标签
表单标签,块级元素,会自动换行
将数据传输给服务器
常用属性
action 表单提交的地址
id 唯一标识
name 名称
target 表单提交打开方式(当前窗口)
method 提交方式
get请求
参数会直接跟在url后面,用?问好拼接
安全性差,传递的数据量小,效率高(是post速度的两倍),有缓存
post请求
参数不会跟在url地址栏后面,会放在请求体中
安全性高,传输数据量大,速度相对来说慢,无缓存
-->
<form action="#" method="get" id="myform" name="myform">
</form>
- 表单元素
- input元素
- textarea文本域
- label标签
- button按钮
- select下拉选项
<form action="#" method="get" id="myform" name="myform">
<!--
表单元素需要设置name属性值,负责数据无法传递!!!
input元素
用于搜集用户信息
type 表单元素的类型
text 文本框
password 密码框
radio 单选框
checkbox 复选框
button 普通按钮
hidden 隐藏域(用来存放需要传递服务器,但不需要显示的数据)
file 文件域(上传文件)
date 日期框
submit 提交按钮
reset 重置按钮
image 图片按钮(提交按钮)
value 表单元素的值
checked 是否选中(单选框/复选框)
disabled 是否禁用
maxlength允许输入的最大字符
textarea文本域
cols 和 rows
label标签
设置label的for属性值与表单元素的id属性值对应,当点击label标签时,会自动给表单元素聚焦
button按钮
type
button 普通按钮
submit 提交按钮(默认)
reset 重置按钮
select下拉选项
<select name="" id="">
<option value="值">文本</option>
<option value="值">文本</option>
<option value="值">文本</option>
</select>
注:当option设置了value属性时,提交的数据是value对应的值
如果未设置value,则提交的数据是文本值
常用属性
value 设置值
select 设置选中状态
-->
编号:<input type="hidden" name="userId" value="1" /> <br>
姓名:<input type="text" name="userName" value="" /> <br>
密码:<input type="password" name="userPwd" value="" /> <br>
性别:男 <input type="radio" name="userSex" value="man" />
女<input type="radio" name="userSex" value="woman" /> <br>
爱好:唱歌 <input type="checkbox" name="userHobby" value="sing" />
跳舞 <input type="checkbox" name="userHobby" value="dance" />
看JOJO<input type="checkbox" name="userHobby" value="JOJO" checked="checked" /> <br>
生日:<input type="date" name="userDate" value="" /> <br>
头像:<input type="file" name="userHead" value="" /> <br>
简介:<textarea name="remark" rows="5" cols="20">213</textarea><br>
城市:<select name="city" multiple="multiple" size="3">
<option value ="">请选择城市</option>
<option value="SH" selected="selected">上海</option>
<option value="ZZ">郑州</option>
<option value="XC">许昌</option>
<option value="SZ">深圳</option>
</select><br>
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
<!-- <input type="image" height="90*2px" width="80px" src="./img/jojo.png"/> -->
</form>
- 常用字符实体
- <
- >
- 空格
- 版权符
<!--
字符实体
< <
> >
空格
版权符 ©
-->
<h2>Hello World</h2>
<h2>Hello World</h2><hr>
©2022波澜不惊
- HTML元素
- 行内元素
- 块级元素
- 行内块级元素
- 表单元素
<!--
块级元素
元素都从新的一行开始,并且其后的元素也另起一行;
元素的高度、宽度、行高以及顶和底边距都可设置;
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),
除非设定一个宽度
行内元素
和其他元素都在一行上;元素的高度、宽度及顶部和底边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变
行内块级元素
和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置
表单元素
-->