form 标签 一般会和input标签连用
属性 | 含义 |
action | 跳转的路径 |
method | 用来明确表单提交的方式(get post)默认值是get(get请求会把用户信息暴露在地址栏上) |
name | 表单的名称 |
注:post:相较于get比较安全,可隐藏用户信息。
1.表单元素
表单元素(文本框,密码框,下拉列表框等等),一般由input,textarea,select标签构成,需要 放到form标签内使用
文本输入
<input type="text"> 定义用于文本输入的单行输入字段:
语法格式:
<input type="元素的类型" name="元素的名称" value="元素的值"
type的取值:
text | 文本框 |
password | 密码框 |
radio | 单选按钮 |
checkbox | 多选按钮 |
submit | 提交按钮 |
reset | 复位按钮 |
button | 普通按钮 |
image | 图像按钮 |
file | 文本域(上传文件的按钮) |
hidden | 隐藏域 |
邮箱 | |
color | 颜色域 |
date | 日期 |
time | 时间 |
datetime-local | 日期+时间 |
range | 进度条 |
input属性:
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="username" value="zhangsan" readonly><br>
用户名:<input type="text" name="username" value="lisi" disabled><br>
密码框:<input type="password" name="password" autofocus required><br>
请选择你的性别:<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女
<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="button" value="普通">
<input type="file">
<input type="hidden" value="123456"><br>
请填写自己的邮箱:<input type="email" name="email" value="请填写邮箱">
<input type="color">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="range">
</form>
</body>
</html>
2.select标签
下拉列表框 ——————一般option标签进行连用
selected属性 ———— 默认被选中的选项
multiple="multiple" 属性 ————以列表形式显示
<select name="" id="" multiple="multiple">
<option value="">A</option>
<option value="">B</option>
<option value="" selected>C</option>
<option value="">D</option>
3. textarea标签
用来实现文本域
cols="30" ———— 多少列,表示文本域的宽度
rows="10"————多少行,表示文本域的高度
<!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="70" rows="70">
</textarea>
</form>
</body>
</html>