1、form表单标签
form 表单用于搜集不同类型的用户输入。
form标签是一个块级元素,以<form>开头,</form>结尾,表单元素由input标签,和一些文本框,下拉框,一些按钮等,它能够包含input、textarea、select等标签。
表单内的属性:
属性 | 作用 |
action | 跳转的路径 |
method | 用于明确表单提交的方式(get post)默认值为get |
name | 表单的名称 |
get值会将用户信息暴露在地址栏上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body><form action="demo01.html" method="get" name="regester">
用户名: <input type="text" name="ueserneme" ><br>
密码: <input type="password" name="password" ><br>
<input type="submit">
</form>
</body>
</html>
post值不会将用户信息暴露在地址栏上:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body><form action="demo01.html" method="post" name="regester">
用户名: <input type="text" name="ueserneme" ><br>
密码: <input type="password" name="password" ><br>
<input type="submit">
</form>
</body>
</html>
建议:写代码时,建议用post值,相对get值安全一点。
路径:
绝对路径:
C:\Users\26848\Desktop\云计算前端上课代码\第二天\demo01.html
相对路径:
..\第二天\demo01.html
1.1 input标签
input标签是form表单里面最重要的一个标签。
在input标签里面,根据type属性的不同,所展现出来的东西也不一样。
取值 | 称述 |
text | 文本框 |
password | 密码框 |
radio | 单选按钮 |
checkbox | 多选按钮 |
submit | 提交按钮 |
reset | 复位按钮 |
button | 普通按钮 |
image | 图像按钮 |
file | 文本域(上传文件的按钮) |
hidden | 隐藏域 |
邮箱 | |
color | 颜色域 |
date | 日期 |
time | 时间 |
datetime-local | 日期+时间 |
range | 进度条 |
运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="../第一天\demo.html" method="post" name="regester">
用户名: <input type="text" name="ueserneme" ><br>
密码: <input type="password" name="password" ><br>
请输入的性别:<input type="radio" value="男" name="ganden" >男
<input type="radio" name="randen">女
<p>
请输入你的爱好
<input type="checkbox" name="aihao">唱歌
<input type="checkbox" name="aihao">跳舞
<input type="checkbox" name="aihao">rap
<input type="checkbox" name="aihao">打篮球
</p>
<input type="submit">
<input type="reset">
<input type="botton" value="普通">
<input type="file">
<input type="hidden" value="12345"><br>
请输入你的邮箱<input type="email" name=""email value="请填写邮箱">
<input type="color" ><br>
<input type="date" >
<input type="time" >
<input type="datetime-local" >
<input type="range" >
</form>
</body>
</html>
运行页面:
1.1.2input的属性:
属性 | 作用 |
checked | 默认选择 |
readonly | 只读 只能读不可修改 |
disabled | 表示禁用 不可点击 |
autofocus | 默认光标的位置 |
required | 不能为空白提交 |
运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body><form action="">
用户名: <input type="text" name="ueserneme" readonly><br>
用户名: <input type="text" name="ueserneme" disabled><br>
密码: <input type="password" name="password" autofocus required><br>
请输入的性别:<input type="radio" value="男" name="ganden" checked>男
<input type="radio" name="randen">女
</form>
</body>
</html>
运行页面:
1.2select标签:
select标签常与option标签连用
属性 | 作用 |
selected | 默认被选中的选项 |
multiple=“multiple” | 以列表的形式显示 |
运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body><form action="">
您的家庭住址 <select name="" id="" multiple="multiple">
<option value="">兰州</option>
<option value="">上海</option>
<option value="" selected>深圳</option>
<option value="">重庆</option>
</select><br>
</form>
</body>
</html>
运行页面:
1.3textarea标签:
用来实现文本框的
属性 | 作用 |
cols | 表示文本域的宽度 |
rows | 表示文本域的高度 |
运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body><form action="">
请留下你的宝贵意见:
<textarea name="" id="" cols="10" rows="5">
</textarea>
</form>
</body>
</html>
运行页面: