5.1 表单基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本框架</title>
</head>
<body>
<form action="" method="" name="">
表单元素..
</form>
</body>
</html>
5.2 form标签属性
属性 | 值 | 描述 |
---|---|---|
action | URL | 提交表单时向何处发送表单数据 |
method | get、post | 设置表单以何种方式发送到指定页面 |
name form_name 表单的名称 | form_name | 表单的名称 |
target | _blank、_self _parent、_top |
在何处打开 action URL |
5.3 post和get区别
GET方法
使用URL传递参数 对所发送信息的数量也有限制 一般用于信息获取。
POST方法
表单数据作为HTTP请求体的一部分对所发送信息的数量无限制 一般用于修改服务器上的资源。
6- 表单元素标签
6.1 输入标签
表单输入标签
<input type=“类型属性” name=“名称 ” …… />
6.1.1 type属性值
Type属性值 | 描述 |
---|---|
text | 文字域 |
password | 密码域 |
file | 文件域 |
checkbox | 复选域 |
radio | 单选域 |
Button | 按钮 |
Submit | 提交按钮 |
Reset | 重置按钮 |
Hidden | 隐藏域 |
image | 图像域 |
6.1.2 单行文本域(text)
<form>
<input type="text" name="".... />
</form>
单行文本域属性
属性 | 描述 |
---|---|
Name | 文字域的名称 |
Maxlength | 指用户输入的最大字符长度。 |
Size | 指定文本框的宽度,以字符个数为单位;文本框的缺省宽度是20个字符。 |
value | 指定文本框的默认值 |
placeholder | 规定用户填写输入字段的提示 |
6.1.3 密码框
<form>
<input type=" password " name=““ ….. />
</form>
6.1.4 文件域属性
<form>
<input type=" file " name=“…“ />
</form>
6.1.5 单选框属性
<form>
<input type=“radio” name=“…“ value=“…” checked />
</form>
6.1.6 复选框标签
<form>
<input type=“checkbox” name=“…“value=“…” checked />
</form>
6.1.7 按钮标签
<input type=“button” name="..." value=“…” />
<!-- 提交按钮 -->
<input type=“submit” name="..." value=“…” />
<!--重置按钮-->
<input type=“reset” name="..." value=“…” />
6.1.8 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-表单标签</title>
</head>
<body>
<form>
<!--明文输入框-->
姓名:<input type="text" name="username"/><br/>
密码:<input type="password" name="pwd"/><br/>
<!--单选框-->
性别:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx">保密<br/>
<!--多选框-->
爱好:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">游泳
<input type="checkbox" checked="checked">跑步<br/>
<!--提交按钮-->
<input type="submit" value="提交按钮"/>
</form>
</body>
</html>
执行结果
6.1.9 图像提交按钮
<input type=“image” name=“…“ src=“imageurl” />
6.1.10 隐藏域
<input type=“hidden” name=“…“ value=“…” />
6.1.11 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-表单标签</title>
</head>
<body>
<form action="http://www.baidu.com">
<!--明文输入框-->
姓名:<input type="text" name=