1. form表单的属性
- 绝对路径-------从盘符开始，找到你所需要的文件的路径 路径+文件的名称（如：D:\云计算上课代码\lianxi\lianxi01.html）
- 相对路径-------当前源文件和目标文件的相对位置 （如：..\lianxi\lianxi01.html）相对位置前需手动输入 ..\
| method | 明确表单提交的方式（get/post）默认值为get |
- get-------会把用户信息暴露在地址栏上
- post-------相对于get较安全
2. form表单元素
2.1 input标签
<input type="元素的类型" name="元素的名称" value="元素的值">
type标签的取值
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 多选按钮 |
| submit | 提交按钮 |
| reset | 复位按钮 |
| button | 普通按钮 |
| image | 图像按钮 |
| file | 文本域（上传文件的按钮） |
| hidden | 隐藏域 |
| email | 邮箱 |
| 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="demo.html" merhod="post" name="regester">
用户名: <input type="text" mame="uesername" value="zhangsan" readonly><br>
用户名: <input type="text" mame="uesername" value="lisi" disabled><br>
密码:<input type="password" name="password" autofocus required><br>
<input type="submit">
请选择您的性别:<br><input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女
<p>
选择您的爱好:<br>
<input type="checkbox" mame="aihao">唱歌
<input type="checkbox" mame="aihao">跳舞
<input type="checkbox" mame="aihao">篮球
<input type="checkbox" mame="aihao">足球
</p>
<input type="submit">
<input type="reset">
<input type="button" value="普通">
<input type="image">
<input type="file">
<input type="hidden" value="123456"><br>
请填写自己的邮箱：<br><input type="email" name="email" calue="请填写邮箱"><br>
<input type="color">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="range">
</form>
</body>
</html>
- 运行结果：
2.2 select标签
- 下拉列表框（一般与option标签连用）
- select标签的属性
select标签的属性
| multiple | 以列表形式显示 |
option标签的属性
| selected | 默认被选中的选项 |
<!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="" selected>上海</option>
<option value="">重庆</option>
<option value="">西安</option>
</select>
</form>
</body>
</html>
2.3 textarea标签
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="30" rows="10">这个家伙什么都没留下</textarea>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
