首页 > > 网页制作 > css >

form实现浏览者登陆、注册页面与浏览器的交互

2020-02-29 16:03:19来源：博客园阅读 ()

form实现浏览者登陆、注册页面与浏览器的交互

浏览器通过form表单把数据提交服务器涉及http协议，模式为浏览器发送请求=>服务器接收=>自身处理=>结果返回浏览器=>浏览器根据结果展示页面给用户，请求分为GET和POST。注意:所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在表单中，其次同一组的单选按钮，name 取值一定要一致，最后form表单中的label标签标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件">1.<form>标签是成对出现的2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php);3.method ：数据传送的方式（get/post）。注意事项:1>所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）2>method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>form表单标签</title>
 7 </head>
 8 <body>
 9   <form method="post" action="">
10     <label for="username">姓名:</label>
11     <input type="text"  name="username" id="username" value="" />
12     <label for="pass">密码:</label>
13     <input type="password"  name="pass" id="pass" value="" />    
14     <input type="submit" value="确定"  name="submit" />
15     <input type="reset" value="重置" name="reset" />
16 </form>  
17 </body>
18 </html>

A.文本输入框、密码输入框<form><input type="text/password" name="名称" value="文本" /></form>

B.文本域(当用户需要在表单中输入大段文字时，需要用到文本输入域)，支持多行文本输入<textarea cols="50" rows="10">在这里输入内容...</textarea>，其中cols用width、rows用height来代替，另外文本域禁止自由拖动resize: none;

C.html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

注意事项:当设置 checked="checked" 时，该选项被默认选中;同一组的单选按钮，name 取值一定要一致.

D.下拉列表seletc,选项option,设置selected="selected"属性，则该选项就被默认选中.经过检验发现，这样写请求方式为get，注释部分无法在导航网展示信息,未注释部分ok.

此外在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>select下拉列表,option选项中value(向服务器提交的值)</title>
 7 </head>
 8 <body>
 9     <!-- <form action="" method="GET" multiple="multiple">
10         <label>爱好:</label>
11         <select>
12           <option value="看书">看书</option>
13           <option value="旅游" selected="selected">旅游</option>
14           <option value="运动">运动</option>
15           <option value="购物">购物</option>
16         </select>
17         <input type="submit" value="提交">
18     </form> -->
19 
20     <form action="" method="GET">
21         <label>城市:</label>
22         <select name="city" multiple="multiple"><!--multiple="multiple"实现多选功能-->
23             <option name="beijing" value="bj">北京</option>
24             <option name="shanghai" value="sh">上海</option>
25             <option name="guangzhou" value="gz">广州</option>
26            <option name="shenzhen" value="sz">深圳</option>
27        </select>  
28        <input type="submit" value="提交">
29     </form>
30 </body>
31 </html>

E.当用户需要提交表单信息到服务器时，需要用到提交按钮。<input type="submit" value="提交">，、只有当type值设置为submit时，按钮才有提交作用，value：按钮上显示的文字

F.使用重置按钮，重置表单信息，<input type="reset" value="重置">

G.form表单中的label标签<label for="控件id名称">注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>form表单中的label标签</title>
 7     <style>
 8         input{
 9             outline: none;
10         }/*轮廓外边框*/
11         textarea{
12             resize: none;
13         }/*禁止自由拖动*/
14     </style>
15 </head>
16 <body>
17     <form action="" method="GET">
18         <label for="sex">性别:</label>
19         男<input type="radio" name="sex">
20         女<input type="radio" name="sex" id="sex">
21         未知<input type="radio" name="sex">
22         <input type="submit" value="提交">
23         <input type="reset" value="重置">
24     </form>
25 
26     <form>
27         <label for="male">男</label>
28         <input type="radio" name="gender" id="male" />
29         <br />
30         <label for="female">女</label>
31         <input type="radio" name="gender" id="female" />
32         <label for="email">输入你的邮箱地址</label>
33         <input type="email" id="email" placeholder="Enter email">
34         <textarea name="" id="" cols="30" rows="10" value="个人简介"></textarea>
35       </form>
36 </body>
37 </html>