下面是光介绍HTML的，没有交换过程
常见的表单的标签
| 标签 |
作用 |
<form> |
定义表单 |
<input> |
输入区域 |
<select> |
选项组 |
<option> |
下拉列表中的选项在<select> 选项组里面 |
<textarea> |
文本域 |
<legend> |
域标题 |
| 常见的属性 |
作用 |
action |
指定叫表单提交那 |
method |
的 HTTP 方法比如get post |
target |
提交后在新窗口中打开 |
表单定义
<form> 定义表单
表单是一个包含表单元素的区域
action属性指定叫表单提交那
用action属性指定发往那去
下面这样是提交到当前页面
1
2
3
| <form action"#">
.......
</form>
|
下面是提交到a.php里面
1
2
3
| <form action"a.php">
.......
</form>
|
method属性指定get或post
下面提交的时候指定的是get
1
2
3
| <form action"a.php" method="get">
.......
</form>
|
target属性添加在另外一个窗口打开
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form action="#" method="get" target="_blank" >
<input type="submit" />
</form>
</body>
</html>
|
常见的属性
| 常见的属性 |
作用 |
type |
创建单行文本输入框 |
name |
当前input起个名字，用作表单参数 |
value |
定义input元素的默认值 |
maxlength |
规定input元素可输入最长字符数 |
width |
下拉列表中的选项在<select> 选项组里面 |
width |
宽度 |
height |
高度 |
应为type属性很重要我下面就介绍一下type属性
| type值 |
作用 |
button |
按钮 |
submit |
提交按钮 |
text |
输入框 |
file |
文件上传 |
password |
密码输入框 |
hidden |
定义隐藏的输入字段 |
image |
定义图像形式的提交按钮 |
checkbox |
定义复选框 |
radio |
单选框 |
reset |
重置 |
tel |
手机号码 |
email |
邮箱地址 |
number |
数字 |
date |
日期 |
下面我就演示几个
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="button" >
</form>
</body>
</html>
|
上面的结果可以看见他里面没有任何字我们可以用value属性来添加字
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="button" value="点击" >
</form>
</body>
</html>
|
“submit” 提交按钮
他也可以用value来修改提交的那个字
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="submit" >
</form>
</body>
</html>
|
“radio” 单选框
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="radio" >
</form>
</body>
</html>
|
“checkbox” 定义复选框
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="checkbox" >
</form>
</body>
</html>
|
“text” 文本
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="text" >
</form>
</body>
</html>
|
“file” 文件
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="file" >
</form>
</body>
</html>
|
“date” 日期
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<input type="date" >
</form>
</body>
</html>
|
name 属性规定 input 元素的名称
简单来说就是提交的时候知道是那个参数提交的他就是定义猜数名的
比如提交一个用户名后端是怎么知道是那个输入框的内容就用name来指定名
实例
他就是我们的参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form action="#" method="get" >
<input type="text" name="user" /> <br/>
<input type="text" name="passwd" /><br/>
<input type="submit" />
</form>
</body>
</html>
|
<select>选项组和<option>下拉列表中的选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<select>
<option>www.baidu.com</option>
<option>bing.com</option>
<option>kali.org</option>
</select>
</form>
</body>
</html>
|
实咧
<textarea> 文本域
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<form>
<textarea cols="30" rows="30" >默认字</textarea>
</form>
</body>
</html>
|
