html5+css3(十)表单

1、表单的概念

表单主要用来获取客户端用户数据(信息)的。如：注册表单、查询表单、登录表单等。

2、表单的工作原理

1. 浏览有表单的网页，填写一些必要的信息，然后点击某个按钮进行提交。
2. 这些表单数据，通过互联网，传递到了服务器上。
3. 服务器上有专门的程序，对表单数据进行验证。如果验证成功，将你的数据存入数据库(MySQL)，则返回一个验证成功的信息。如果验证失败，将返回一个错误信息。

从上面表单的工作原来看：表单的制作分两个部分，一是前台页面的制作，二是后台PHP对表单数据的处理。

3、表单的结构

 

<form>标记属性——块元素

1. name：给表单起个名字。这个名字主要给JavaScript来用。JS主要用来做客户端表单验证。
2. method：表单的提交方式，取值：get或post。
3. action：指定表单的处理程序，一般是PHP文件。
   1. 1. 如果action为空，那么表单数据发到哪里去了？
      2. 结果：那么表单数据提交给了它自己来处理。
4. enctype：指定表单数据的编码方式(解密方式)。这个属性只能用在 method = “post” 的情况下。
   1. 1. application/x-www-form-urldecoded  //默认的加密方式
      2. multipart/form-data  //如果你上传文件，该值必须它自己。

 

GET方法和POST方法

（1）GET提交方式(基本上用不着)

GET方式，是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。

注意：地址栏传数据的方式，默认就是GET方式。

 

上面URL的说明：

1. login.php  //是表单处理程序文件
2. username=yao&userpwd=123456 //表单提交的数据，又称为“查询字符串”。
3. action文件和查询字符串之间用“？”分隔。
4. 每两个表单元素的“名称=值”之间用“&”分隔。
5. 表单名称和表单值之间用“＝”分隔。

 

如果某个表单元素，不想往服务器传递数据，那么，我们可以不给它加name属性。传递到服务器的数据，如果没有name，则无法获取它的值。

GET方式的特点：

1. GET方式不能提交敏感数据，如：密码。
2. GET方式只提交少量数据。因为地址栏的长度有限制，大约100外字符。
3. GET方式下不能上传附件。

（2）POST表单提交方式

POST提交方式，它不是将表单数据追加到地址上，而是直接传给表单处理程序。

POST方式的特点：

1. POST提交的数据相对安全。
2. POST可以提交海量数据。
3. POST方式可以上传附件。

表格和表单的嵌套顺序

单行文本域

1. 语法格式：<input  type = “text” 属性 = “值” />
2. 常用属性
   1. 1. name：文本框的名字。命名规则是：可以包含字母、数字、下划线，只能以字母开头。
      2. type：表单元素的类型。
      3. value：文本框中的值。
      4. size：文本框的长度，以“字符”为单位。
      5. maxLength：最多可以输入多少个字符，超出的就输不进去了。
      6. readonly：只读属性。可以选中，但不能修改。如：readonly = “readonly”
      7. disabled：禁用属性。不能选中，不能修改。如： disabled = “disabled”
3. 举例说明：<input type="text" name="username" />

单行密码域

1. 语法格式：<input  type = “password” 属性 = “值”  />
2. 常用属性
   1. 1. name：密码框的名字。命名规则是：可以包含字母、数字、下划线，只能以字母开头。
      2. type：表单元素的类型。
      3. value：元素中的值。
      4. size：元素的长度，以“字符”为单位。
      5. maxLength：最多可以输入多少个字符，超出的就输不进去了。
      6. readonly：只读属性。可以选中，但不能修改。如：readonly = “readonly”
      7. disabled：禁用属性。不能选中，不能修改。如： disabled = “disabled”

 

单选按钮

1. 语法格式：<input  type = “radio”  属性 = “值”  />
2. 常用属性
   1. 1. Name：元素的名称
      2. Value：元素的值，该value中数据将发往服务器。
      3. Checked：默认选择哪一项。如：checked = “checked”

 

 

 

注意：一组单选按钮，只能选择一个，但name的值必须一致。如：name = “sex”

      单选按钮用户自己不能输入内容，用户只能选择，因此必须为它指默认值value。

 

复选框

1. 语法格式：<input  type = “checkbox”  属性 = “值”  />
2. 常用属性
   1. 1. Name：元素的名称
      2. Value：元素的值
      3. Checked：默认选中。如：checked = “checked”

 

注意：复选框也是一组选项，因此name的值必须一致。在PHP中，使用数组来获取多个同名的name的值。

      复选框可以同时选多个，也可以一个都不选。

下拉列表

<select  name = “city”>

<option  value = “北京市”>北京市</option>

<option  value = “天津市”>天津市</option>

<option  value = “重庆市”>重庆市</option>

</select>

1. <select>标记的属性，只有一个name属性
2. <option>标记的属性有两个：value属性、selected属性
   1. 1. Selected：默认选中。如：selected = “selected”

 

文本区域

1. 语法格式：<textarea  name = “名称”  cols = “宽度”  rows = “高度”></textarea>
2. 常用属性
   1. 1. name：元素名称
      2. cols：宽度，是指多少个字符宽。
      3. Rows：高度，是指几行高。
3. 提示：<textarea>和</textarea>之间是默认文本

 

各种按钮

1. 提交按钮：<input type="submit" value="提交表单" />
2. 重置按钮：<input type="reset" value="重新填写" />
3. 图片按钮：<input type="image" src="images/btn02.png" />   //功能就是提交表单，与submit按钮功能一样
4. 普通按钮：<input type="button" οnclick="javascript:window.close()" value="关闭窗口" />
   1. 1. 普通按钮本身是不具备任何功能的，一般要与JS程序配合使用，实现相应的功能。
      2. 关于JS的内容，后面再讲

隐藏域

功能：隐藏域就是看不见的一个框。传递一些值，而这个值又不想让别人看见。

用处：主要用于PHP后面程序，如：修改某一条新闻内容时，需要传递一个新闻的id号。

语法格式：<input  type = “hidden”  name = “名称”  value = “默认值”  />

 

上传文件域

1. 语法格式：<input  type = “file”  属性 = “属性”  />
2. 常用属性
   1. 1. name：表单元素的名称
      2. value：表单元素的值，这个值其实就是上传的文件名。value属性是只读属性，这个value的内容只能来自手动选择上传的文件，而不能用户自己指定一个路径。为了安全起见，value是只读的。
3. 注意：现在只能实现上传文件框，而不能真正实现上传功能，上传功能用PHP来实现的。

 

 

 

 

 

<caption>表格标题

1. 语法格式：<caption></caption>
2. 提示：<caption>标记是<table>的子标记。<caption>放在<table>开始标记之后。