列表标签:展示列表项
有序列表: ol li
无序列表: ul li
表单标签:用于采集用户数据,和服务器进行交互。
<form>:用于定义表单。可以定义一个范围来采集用户输入的数据。
常用属性:
action:指定提交数据的url
method:指定表单数据的提交方式(共有7中,常用的有两种)
get:
1.请求参数会在地址栏中显示。数据会封装到请求行中。
2.请求参数大小有限制。
3.不安全
post:
1.请求参数不会再地址栏中显示。会封装到请求体中。
2.请求参数大小没有限制。
3.安全
注意:表单项中的数据要想被提交,必须定义其name属性!
常用的表单项:
A.<input>
常用属性:type
text:文本输入框(默认文本输入框)
password:密码输入框
radio:单选框
注意:
1.要想实现单选效果,单选框的name值必须一样。
2.一般会给每个单选框提供一个value属性。
3.使用checked属性指定默认值。
checkbox:复选框
注意:
1.一般会给每个复选框提供value属性。
2.checked属性,可以指定默认值
按钮:
submit:提交按钮用于提交表单。
button:普通按钮。
image:图片提交按钮。src:指定图片的路径
B.<select>:下拉列表
注意:要和<option>标签配合使用
select标签要设置name属性
option标签要设置value属性
C.<textarea>
属性:
cols:指定列数(每一行有多少个字符)
rows:指定行数
1、Get提交的参数列表拼接到地址栏后面,post不会拼接到地址栏
2、get范式提交的数据,敏感信息不全全,post但是提交的数据相对安全
3、get方式提交的数据是有限的,post方式从理论上提交的数据是无限大的
尽量使用post方式提交表单
输入项标签
<input/>标签
表单输入项标签之一,用户可以在该标签上,通过填写和选择,进行数据输入
type : 设置该标签的种类
text:文本框,默认
password:密码框,内容非明文
radio:单选框,在同一组内又单选的效果
chechbox:复选框,在同一组内有复选鲜果
submit:提交按钮,用于控制表单提交数据
reset:重复按钮,用于控制表单提交数据
file:附件框,用于文件上传
hidder:隐藏域,一般用作提交服务器需要拿到,单用户不需要看到的数据
button:普通按钮,需要和js事件一起用
name:单选框,复选框进行数据的分组,设置该标签对应的参数名,要提交数据给后台,西辟邪name
value :设置该标签对应的参数值/作为按钮的名字
checked:设置单选框/复选框的默认选中状态
readonly:设置该标签的参数值只读,用户无法手动更改,数据是可以正常提交的
disabled:设置该标签不可用,参数值无法更改,并且无法提交
--------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>作业</title>
<meta charset="utf-8" />
</head>
<body>
<form action="下午3.html" method="post">
<left>用户ID:<input type="hidden" name="uid" value="123">
<br>
<br>
头像:<input type="file" name="photo">
<br>
<br>
用户名:<input type="text" name="username" readonly="readonly" value="睡姿决定发型">
<br>
<br>
密码:<input type="password" name="userpass" disabled="disabled" value="123123">
<br>
<br>
手机号:<input type="text" name="phone" placeholder="手机号">
<br>
<br>
邮箱:<input type="text" name="qq" placeholder="邮箱">
<select name=".com"><option value="fsy" selected="selected">@282.com</option>
<option value="qxx">@123.com</option>
<option value="qzl">@321.com</option></select>
<br>
<br>
性别:<input type="radio" name="gender" value="male" checked="checked">男<input
type="radio" name="gender" value="female">女<br>
<br>
年龄:<select name="old"><option value="少年"
selected="selected">1~18</option>
<option value="青年">19~30</option>
<option value="中年">31~50</option></select>
<br>
<br>
爱好:<input type="checkbox" name="hobby" value="chiji" checked="checked">游戏<input
type="checkbox" name="hobby" value="meinv" checked="checked">美女<input
type="checkbox" name="hobby" value="dianying">旅游<input
type="checkbox" name="hobby" value="eat">吃<br>
<br>
你喜欢的明星:<select name="star"><option value="fsy">周深</option>
<option value="qxx" selected="selected">胡歌</option>
<option value="qzl">司南</option></select>
<br>
<br>
所在省份:<select name="from"><option value="sheng"
selected="selected">河南省</option>
<option value="sheng">北京</option>
<option value="sheng">湖北</option>
<option value="sheng">山东</option>
<option value="sheng">浙江</option>
<option value="sheng">福建</option>
<option value="sheng">广西</option></select>
<br>
<br>
自我介绍:<textarea name="info"></textarea>
<br>
<br>
<input type="submit" value="确定">
<input type="reset" name="">
<input type="button" value="按钮">
<br>
<br>
<!---->
<button type="submit">确定</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</left>
</form>
</body>
</html>