1， 作用：
用于接收用户数据，提交给服务器
表单二要素：
1，form元素
表单，用于收集用户信息，并提交给服务器
2，表单控件
提供了能够与用户交互的可视化组件
2， form元素
1，标记
<form> </form>
2, 属性
1，action
指定处理程序的地址， 默认提交给本页
点击提交后，提交按钮会向action的地址发送请求
2， method
提交方法/方式,共提供了7-8个值，常用的只有2个
1, get(默认值)
向服务器请求数据的时候使用
特点：
1，提交的数据会显示在地址栏
2，安全性较低
3，提交数据最大2KB
2, post:
要将数据提交给服务器处理时使用
特点：
1，隐式提交，看不到提交的数据
2，安全性较高，账号密码等用post方法
3，无提交数据的大小限制；（如果太大，一般不用网页传，一般用第三方工具）
3， 表单控件(重难点)
1， 作用：
提供了能够与服务器交互的可视化组件
注意：
只有放在表单中的表单空间才允许被提交
表单空间都是"行内块"元素
2, 空间语法
文本框: <input type="text"> 以明文显示
密码框：<input type="password"> 以密文显示
属性：
name: 定义空间名称，提交给服务器的时候使用，如果没有name则无法提交
value: 要提交给服务器的值，同时也是默认能够显示在空间上的值
maxlength: 限制输入的最大字符数
placeholder: 占位符，用户在未输入任何数据时所显示的内容，浅色显示
按钮
1，提交按钮：<input type="submit">
将表单数据提交给服务器
2, 重置按钮： <input type="reset">
将表单内容恢复到初始化状态
3, 普通按钮： <input type="button">
允许通过JS自定义功能，使用最广泛
属性：
value:按钮上显示的文本
标记: <button></button>
属性： type
取值： submit/reset/button
4，单选按钮&复选框
单选按钮： <input type="radio">
复选按钮： <input type="checkbox">
属性：
name: 定义空间的名称，也起到分组的作用；同一组的名称必须一致
value: 尽量提前声明
checked: 设置预选中，默认按钮是否是选中状态
5， 隐藏域和文件选择框
隐藏域：想提交给服务器，但不想给用户看到的数据可以放在隐藏域中；
标记：<input type="hidden">
属性：name value
文件选择框：
作用：文件上传时使用；上传文件或者图片的时候使用
标记： <input type="file">
属性： name
6， 多行文本框；
使用场景： 自我介绍，描述，总结等等
标记： <textarea> xxxx </textarea>
属性：
name: 空间名称
cols: 指定文本域默认显示的英文字符数，中文减半；
rows: 指定文本域默认显示的行数；如果在指定行内未显示完成，则出现滚动条
7, 下拉选择框(下拉列表)
<select name="">
<option value="">显示数据</option>
<option value="">显示数据</option>
<option value="">显示数据</option>
</select>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="https://www.jd.com" method="get" align="left">
<!--表单空间放在这里才允许提交-->
<p>
用户名：
<input type="text" name="username" value="" maxlength="16" placeholder="邮箱/用户名/已验证手机">
</p>
<p>
密 码：
<input type="password" name="pass" value="" maxlength="8" placeholder="密码">
</p>
<p>
<!--单选按钮-->
<input type="radio" name="gender" value='m' checked> 小哥哥
<input type="radio" name="gender" value='f'> 小姐姐<br>
</p>
<p>
<!--复选框-->
人生梦想<br>
<input type="checkbox" value="1" name="hobby"> 每天睡到自然醒
<input type="checkbox" value="2" checked name="hobby"> 睡尽天下的美女
<input type="checkbox" value="3" name="hobby"> 天天追剧看小说<br>
<input type="checkbox" value="4" name="hobby"> 要踏遍名山大川
<input type="checkbox" value="5" name="hobby"> 平安健康每一天
<input type="checkbox" value="5" name="hobby"> 长命百岁不生病<br>
</p>
<p>
<!--隐藏域-->
<input type="hidden" name="uid" value="05123777"><br>
</p>
<p>
<!--文件选择框-->
选择头像 <input type="file" name="user_img" ><br><br>
</p>
<p>
自我介绍
<textarea name="personal_info" id="7777" cols="30" rows="5"></textarea><br>
</p>
<p>
<!--下拉选择框-->
影响中国的航道最主要的是：
<select name="channel" id="">
<option value="maliujia">马六甲海峡</option>
<option value="huoermuzi">霍尔木兹海峡</option>
<option value="mande">曼德海峡</option>
<option value="zhibuluotuo">直布罗陀海峡</option>
<option value="suyishi">苏伊士运河</option>
<option value="banama">巴拿马运河</option>
</select>
</p>
<p>
<!--按钮练习-->
<input type="submit">
<input type="reset">
<input type="button" value="找回密码">
</p>
</form>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>
添加管理员账户
</h1>
<form action="www.jd.com" method="POST">
<!--form中嵌套table，可以合理布局-->
<table width="550" border = "1">
<tr>
<td>姓名：</td>
<td><input type="text" name="user" maxlength="10"></td>
<td>10个字符以内</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="passwd" maxlength="10"></td>
<td>10个字符以内</td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="f">女士
<input type="radio" name="sex" value="m">男士</td>
</tr>
<tr>
<td>角色：</td>
<td><input type="checkbox" name="role" value="0">超级管理员<br>
<input type="checkbox" name="role" value="1">账单管理员</td>
<td>至少选择一个角色</td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="img"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="保存" >
<input type="reset" value="重填"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
2113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
