from表单的作用、组成和用法

1.from表单的作用

表单在网页中主要负责数据采集功能，它用<form>标签定义。用户输入的信息都要包含在form标签中，点击提交后，<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

2.表单的组成

表单标签、表单域、表单按钮。

1.表单标签

  是指<form>标签本身，它是一个包含表单元素的区域，使用<form></form>定义

 2.表单域

  是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）

3.表单按钮

  用来提交<form>表单中的所有信息到服务器

表单标签的格式:

<form action＝"url" method=get|post name="myform" ></form>

  -name：表单提交时的名称

  -action：提交到的地址

 -method：提交方式，默认为get

post和get区别：

1.数据提交方式，get把提交的数据url可以看到，post看不到

2.get一般用提交少量数据，post用来提交大量数据

3.get最多提交2kb数据，post理论上没有限制

4.get提交的数据在浏览器历史记录中，安全性不好

 

2.1表单按钮

•单行文本框<input type="text" >默认值是type="text"•密码框<input type="password"/>　
•单选按钮<input type="radio" name=””/>
•复选框<input type="checkbox"/>
•隐藏域<input type="hidden"/>
•文件上传<input type="file"/>
  下拉框<select>标签
<select><option value="1">北京</option></select>
•多行文本<textarea></textarea>
•提交按钮<input type="submit"/>
•普通按钮<input type="button"/>
•重置按钮<input type="reset"/>

 

文本框

<input type="text" />

属性：

name:定义控件名称

value：指定控件初始值

 

密码框

<input type="password" />

属性：

name:定义控件名称

value：指定控件初始值

 

单选按钮

<input type="radio" />

属性：

name:定义控件名称

value：指定控件初始值

checked：设置控件初始状态是否被选中

一定要相同的name属性达到单选的效果

性别：

<input type="radio" name="sex"/>男

<input type="radio" name="sex"/>女

 

复选框

<input type="checkbox"  />

属性：

name:定义控件名称

value：指定控件初始值

checked：设置控件初始状态是否被选中

例如：爱好:

         <input type="checkbox" checked/>游戏

         <input type="checkbox"/>唱歌

         <input type="checkbox"/>跳舞

 

文件

<input type="file"/>

属性：

name:定义控件名称

使用file类型的input时要注意以下几点

1.form表单的method属性值要为post

1.form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。

默认地，表单数据会编码为 "application/x-www-form-urlencoded"，不能用于文件上传

 <form action="" method="post" enctype="multipart/form-data">

       <input type="file" name="file1"/>

 </form>

 

隐藏区域

<input type="hidden"  />

属性：

name:定义控件名称

value：指定控件初始值

 

按钮

<input type="button"  />

属性：

name:定义控件名称

value：指定控件初始值

不具有提交功能

 

提交按钮

<input type="submit"  />

属性：

name:定义控件名称

value：指定按钮表面显示文字

 

重置按钮

<input type="reset"  />

属性：

name:定义控件名称

value：指定按钮表面显示文字

 

图像图片按钮

<input type="image" src="URL"/>

属性：

name:定义控件名称

src：指定图像地址

 

按钮

    <button>按钮</button>

属性:

type:button/submit/reset,默认值为submit

 

下拉列表框

select属性：                                      <select>

name:此列表框的名字                              <option></option>

multiple：多选，不用赋值                         <option></option>

size :规定下拉列表中可见选项的数目(显示几行)   </select>

disabled:规定禁用该下拉列表

option属性：

selected ：用来指定默认的选项

value： 用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value 属性来获得该区域选中的数据项的

下拉列表框续

<select name="" id="">

       <optgroup label="北京">

       <option value="1">东城区</option>

       <option value="2">西城区</option>

       <option value="3">海淀区</option>

       </optgroup>

       <optgroup label="河北省">

              <option value="4">石家庄</option>

              <option value="5">保定市</option>

              <option value="6">沧州市</option>

       </optgroup>

</select>

 

多行文本框

<textarea></textarea>

属性：

• • • cols ：这文字区块的宽度
    • rows ：这文字区块的列数，即其高度

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

 

<label></label>

        标签为 input 元素定义标注。

        label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”

         <label for="pwd">记住密码</label>

<input type="checkbox" name="pwd" id="pwd" />

*通过label的for指向按钮的id来绑定，for和id属性的值要相同

       <form>

              <label for="male">Male</label>

              <input type="radio" name="sex" id="male" />

       </form>

       <label>标签一般和radio、checkbox类型一起使用。

<fieldset>元素集

       fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，legend标签定义了fieldset的提示信息，fieldset是块级元素。

              <fieldset>

                   <legend>健康信息</legend>

 身高：<input type="text" />

 体重：<input type="text" />

</fieldset>