首页 > 技术文章 > form表单

NeverCtrl-C 2017-03-19 22:36 原文

1 什么是表单

  就是从浏览器向服务器传输数据的手段(用于显示、收集信息,并且提交信息到服务器)

2 表单二要素

  2.1 form元素:就是有内容和属性的form标签

  2.2 表单控件: 就是可以放到表单域里面的控件(就是信息输入项)

3 补充之标签和元素的区别

  3.1 标签

    标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如<table></talbe>、<form></form>。当然还有少部分不是成对出现的,如<br>、<hr>等。 (标签就是没有属性和内容的元素)

  3.2 元素

    元素由一个开始的标签和结束的标签组成并且包含内容、拥有属性(故:元素就是拥有属性和内容的标签)  

    HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。 

4 表单元素

  4.1 表单定义

    使用<form></form>标记;<form>和</form>之间的区域叫做表单域,所有的表单控件都要写在表单域中;表单域中的数据就是要传输给服务器的数据

  4.2 表单主要属性

    4.2.1 action -->> 提交表单的URL

    4.2.2 method -->> 提交数据的方式

    4.2.3 enctype -->> 数据进行编码的方式 

5 表单控件

  5.1 input元素

    不同的type类型代表不同外观的input元素:

      text:文本框  password:密码框

      radio : 单选框  checkbox : 复选框

      submit : 提交按钮(提交表单数据给服务端或者其他程序)  

      reset : 重置按钮(清空表单内容并且恢复到默认值)  

      button : 普通按钮(用于执行客户端脚本)

      hidden : 隐藏域(用于书写在表单中不让用户看见的信息)

      file : 文件选择框(选择要上传的文件)

    5.1.1 文本框、密码框

      5.1.1.1 属性

        value : 访问者输入的任何文本

        maxlength : 限制输入的字符数量

        readonly : 将文本控件设置为只读

    5.1.2 单选框、复选框

      5.1.2.1 属性

        value : 程序员设定的文本值;当提交form时,被选中的控件的value值就会被提交到服务器

        name :  用于实现分组,同一组的单选框必须相同;分组后每一组只有一个元素能够被选中(例子:性别的选择) 

        

 

        利用name的值相同来实现单选只能适用于单选框;对于复选框而言name值是否相同都都可以实现多选

        

 

        checked : 将表单控件设置成被选中

    5.1.3 提交按钮、重置按钮、普通按钮

      5.1.3.1 属性

        value : 按钮的名字(value属性的默认值是“提交”)

    5.1.4 隐藏域、文件选择框

  5.2 label元素

    用于给控件设置显示名称

    5.2.1 语法

      <label for="控件id">文本</label>

      注意:这里的文本可以是图片、视频......

    5.2.2 属性

      for : 设置文本所关联的控件id,关联后点击label元素就相当于点击了关联的控件

  5.3 textarea元素(文本域元素)  

    5.3.1 语法

      <textarea name="" id="" cols="30" rows="10"></textarea>

    5.3.2 属性

      cols : 指定列数

      rows : 指定行数

      readonly : 设定为只读

  5.4 select元素(下拉选择内容元素)

    5.4.1 语法    

1 <select name="选择" id="">
2                 <option value="1">java</option>
3                 <option value="2">python</option>
4                 <option value="3">c++</option>
5             </select>
select元素语法

  5.5  提交的注意事项

    5.5.1 任何表单控件都有的属性: id name value

    5.5.1 只有书写了name属性的表单控件才可以进行提交,而且提交的内容就是value的属性值(可以不书写value属性,但是每个表单控件都会被自动添加上value属性,而且value属性的属性是动态变化的,所以在进行提交的时候是提交的最新的value属性值)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <meta name="Keywords" content="" />
 6         <mata name = "description" content = "" />
 7         <title>单项测试</title>
 8         <link rel="stylesheet" href="test.css">
 9         <form action="">
10             账号:<input value="zhanghao" name='user' type="text" placeholder="请输入账号" />
11             <br />
12             <br />
13             密码:<input name='password' type="password" placeholder="请输入密码">
14             <br />
15             <br />
16 
17             性别:
18             <input type="radio" name="gender" />&nbsp;
19             <input type="radio" name="gender" />&nbsp;
20             <input type="radio" name="gender" />不告诉你
21             <br />
22             <br />
23 
24             爱好:
25             <input id="basketball" name="'habbit'" type="checkbox"><label for="basketball"><img src="../img/123.jpg" alt=""></label>&nbsp;
26             足球<input name="'habbit'" type="checkbox">&nbsp;
27             排球<input name="'habbit'" type="checkbox">&nbsp;
28             <br />
29             <br />
30 
31             <textarea readonly="readonly" name="" id="" cols="30" rows="10">nihao</textarea>
32             <br />
33             <br />
34             
35             <input type="hidden" value="hello" name="hidden" checked="checked" />
36             <br />
37             <br />
38 
39             <input type="file" name="file" />
40             <br />
41             <br />
42 
43             <select name="选择" id="">
44                 <option value="1">java</option>
45                 <option value="2">python</option>
46                 <option value="3">c++</option>
47             </select>
48             <br />
49             <br />
50 
51             <input type="submit" value="点击提交" name="tj" />
52             <br />
53             <br />
54 
55             <input type="reset" value="点击重置" name='cz'/>
56         </form>
57         <form action=""></form>
58     </head>
59 <body>
60     <p>测试</p>
61 </body>
62 </html>
该篇博客源代码

 

 

 

 

 

 

 

 

 

 

 

    

推荐阅读