1.表单是收集用户信息输入——>发送——>或提交给服务器:
2.表单分为二大类:
1.输入:内容——>文本——>普通和密码——>单选框——>多选框——>下拉框;
2.提交:提交按钮——>http:——>超文本传输协议——>主要保持客户级和服务级的通信——>浏览器和服务器的通讯;
3.模式:请求——>应答——>浏览器主动的发起请求——>服务器 接受请求——>自身做处理——>把请求的结果反回给浏览器——>浏览器根据结果把内容展示出来;
3.跟表单有关联的标签:
1.<from></from>——>文本内容<input>标签——>type属性——>对应输入方式——>text——>纯文本内容;
2.做简单的"用户注册页面"——>代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<form action="">
用户名:<input type="text">
密码:<input type="password">
<input type="submit">
</form>
</body>
</html>
***注意小白们不要把form写成了from****
填写用户名和密码点击提交没有反应——>还需要在加一些其他属性——>name属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="usr"><br>
密码:<input type="password" name="pas"><br>
<input type="submit">
</form>
</body>
</html>
提交信息后——>用户名和密码都在浏览器的地址框中
3.单选框——>如果名字一样就是一组——>要在名字一样地方做选择;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="usr"><br>
密码:<input type="password" name="pas"><br>
性别:<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex">中性<br>
<input type="submit">
</form>
</body>
</html>
***name不一样就是不同的组***
4.复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="usr"><br>
密码:<input type="password" name="pas"><br>
性别:<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex">中性<br>
兴趣爱好:<input type="checkbox" name="ckb">游泳
<input type="checkbox" name="ckb">看视频
<input type="checkbox" name="ckb">逗嘟嘟
<input type="checkbox" name="ckb">逛街
<input type="submit">
</form>
</body>
</html>
5.下拉框——><select></select>标签——>"option选项"属性——><option></option>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="usr"><br>
密码:<input type="password" name="pas"><br>
<!--单选框-->
性别:<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex">中性<br>
<!--复选框-->
兴趣爱好:<input type="checkbox" name="ckb">游泳
<input type="checkbox" name="ckb">看视频
<input type="checkbox" name="ckb">逗嘟嘟
<input type="checkbox" name="ckb">逛街 <br>
<!--下拉框-->
城市:<select name="city">
<option value="">沈阳</option>
<option value="">桐乡</option>
<option value="">珠海</option>
</select> <br>
<input type="submit">
</form>
</body>
</html>
6.所以选都有一个默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="usr"><br>
密码:<input type="password" name="pas"><br>
<!--单选框-->
性别:<input type="radio" name="sex" value="male"> 男
<input type="radio" name="sex" value="female"> 女
<input type="radio" name="sex">中性<br>
<!--复选框-->
兴趣爱好:<input type="checkbox" name="ckb" value="swim">游泳
<input type="checkbox" name="ckb" value="watch videos">看视频
<input type="checkbox" name="ckb" value="piay with dog">逗嘟嘟
<input type="checkbox" name="ckb" value="shopping">逛街 <br>
<!--下拉框-->
城市:<select name="city">
<option value="sy">沈阳</option>
<option value="tx">桐乡</option>
<option value="zh">珠海</option>
</select> <br>
<input type="submit">
</form>
</body>
</html>
4.表单提交方式:
1.GET——>内容在网址里面;
2.POST——内容放在http的头里面;
action属性——>对应的提交网址——>action不填就默认当前网址——><form action="2.html">——>代码控制传输的那个文件;
method属性——>默认值是GET——><form action="2.html" method="POST">——>post传的值网址没有变化——>内容放在http的头里面;