html笔记03:表单

1.表单是用来收集用户填写的信息,可以说表单就是一个容器,里面的元素的类型可以不一样,所表示的功能也不同。

表单基本语法:

 1 <html>
 2 <head>
 3   <title>表单的基本语法</title>
 4 </head>
 5 
 6 <body>
 7 
 8   <form>
 9   </form>
10 </body>
11 </html>

2.表单的两属性

action:表示表单提交后发送的URL地址,发送方式用method表示:可选参数有get/post,get传输量比较少,post传输量比较大

 1 <html>
 2 <head>
 3   <title>表单的基本语法</title>
 4 </head>
 5 
 6 <body>
 7 
 8   <form action= "show.aspx" method = "get">
 9      <input type="text"  >
10 <br>
11      <input type="password">
12 <br>
13      <input type="button" value="提交">
14   </form>
15 </body>
16 </html>

补充:<input>的语法中,完整语法为:

<input type="#">

这里#代码表示类型,可选项是:text,image,password,checkbox(复选框),radio(单选框),hidden(隐藏--密码),submit(提交),reset(重置)

3.

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title>登录界面</title>
 5 
 6 </head>
 7 
 8 <body>
 9    <h1>登录界面</h1>
10    <form action="" method="get">
11    用户名:<input type="text" name="username"/><br>
12    密&nbsp;&nbsp;码:<input type="password" name="pwd"/><br>
13    <input type="submit" value="登录"/><input type="reset"/>
14 </form>
15 </body>
16 </html>

4.

 1 名字:<input type = "text"  value = "请输入名字" name = "username"/> <br/>
 2 密码:<input type = "password"  name = "pwd"/> <br/>
 3 ***喜欢的水果***<br/>
 4 <!-- name = "v1"这里name我们都是取v1,这是为了:将来链接服务器时候,提交的时
 5 
 6 候比较方便-->
 7 <input type = "checkbox"  name = "v1"/> 西瓜 <br/>
 8 <input type = "checkbox"  name = "v1"/> 苹果 <br/>
 9 <!-- name = "sex" 这里单选的表单之中,我们取名必须一样,不然会出现问题-->
10 ***选择性别***<br/>
11 <input type = "radio"  name = "sex"/> 男 <br/>
12 <input type = "radio"  name = "sex"/> 女 <br/>
13 ****隐藏(它的用途主要是:既可提交数据,同时不影响界面)<br/>
14 <input type = "hidden"  value = "123"  name = "salary"/>
15 
16 ****下拉选择框*****<br/>
17 请选择你的出生地:
18 <!-- 将来提交给网络远端数据库的时候,实际上提交的是像这里的name = "biradd"类
19 
20 似的标号-->
21 <!-- 像刚刚开始option选项中没有属性value= **,这样的select控件携带的数据是不能
22 
23 提交给远端服务器的,必须添加value-->
24 <select name = "biradd" >
25   <!--实际开发的时候我们还是经验上加:调节下拉框宽度-->
26   <option value = "">---请选择---</option>
27   
28   <option value = "beijing">北京</option>
29   <option value = "shanghai">上海</option>
30   <option value = "chongqing">重庆</option>
31 <select/><br/>
32 
33 ****请留言*****<br/>
34 <textarea  cols = '30'  rows = '10' >请这里输入…… </textarea><br/>
35 
36 ****请选择你要上传的文件*****<br/>
37 <input type = "file" name = "myfile"/>请选择文件

输出结果如下:

原文地址:https://www.cnblogs.com/hebao0514/p/4609428.html