html表单

html表单

一、HTML 表单作用：用于搜集不同类型的用户输入，用户提交表单时向服务器传送数据，从而实现用户与web服务器的交互。
二、<form>
元素定义 HTML
表单：
<form>
   Form elements
</form>
 
三、HTML
表单包含的表单元素：

<input>
元素

<input> 元素是最重要的表单元素。
<input>
元素有很多形态，根据不同的 type 属性，如：
1.文本框类：
（1）单行文本框：text
<input
type="text"
name="name"
value="your name">

（2）密码框：password

<input
type="passwor
4000
d"
value="密码">

2.选择类：

（1）单选：radio

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

注意：单选时，name值相同时为一组值，每次只能选一个

（2）多选：checkbox

<input
type="checkbox"
value="篮球" name="like">篮球
<input
type="checkbox"
value="足球" name="like">足球
<input
type="checkbox"
value="排球" name="like">排球

 

3.提交（按钮）类：
（1）普通按钮：button
<input
type="button"
value="确定">

（2）提交按钮：submit
<input
type="submit"
value="发送">

（3）重置按钮：reset
<input
type="reset"
value="重置">

（4）图片按钮：
<input
type="image"
value="图片"
src="1.jpg"
style="width:
35px;height:
30px;">

4.特殊：

（1）文件上传：file

<input
type="file">

（2）隐藏：hidden

<input
type="hidden"
value="隐藏">

注意：hidden时，该元素不再在页面出现

<textarea>元素----多行文本框：

<textarea
 style="resize：none"></textarea>

注意:1.textarea默认
可以拉动框右下角改变文本域的大小；

     2.可设置 style="resize: none"禁止改变大小，一般情况下要禁
    

       止改变大小，因为大小改变时会影响布局;

     3.textarea可以设置宽高，当改变大小时，有最小值，即为设置的大小；

     4.不设置宽高时，默认文本域的宽高分别是：163和36（包括padding=2,border=1）  

<select>元素---下拉框元素：

<select
name="province">

    <option>--请选择--</option>

    <option
selected="selected">西安</option>

<option>北京</option>
</select>

注意：selected="selected" 默认选中,不设置时默认选中第一个

<fieldset>---带标题的框：

<fieldset>

    <legend>爱好</legend>

    <h1>喜欢</h1>
</fieldset>

注意：<legend>是标题，默认时在框的左上方，给其设置margin: 0 auto

让标题处于框的中间位置。

 

四、表单FORM的5个属性（name,method,action,enctype,target）

1.name:表单的名称（通过为表单命名可以控制表单与后台程序之间的关系。）

2.method:定义表单结果从浏览器传送到服务器的方法，一般有两种方  

  法get和post

 

注意：method方法中

（1）GET方法：:将表单内容附在URL地址后面，所以对提交信息的长度进行了限制，不可以超过8192个字符。如果信息太长，将被截去，从而导致意想不到的处理结果；同时GET方法不具有保密性，不适合处理如信用卡卡号等要求保密的内容，而且不能传送非ASCII码的字符。

（2）POST方法：:将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器上的处理程序中，该方法没有字符的限制，它包含了ISO10646的字符集，是一种邮寄的方式，在浏览器的地址栏不显示提交的信息（保密性好），这种方式传送的数据是没有限制的。

当不指明是哪种方式时，默认为GET方式。

 

3.action：用来定义表单处理程序(一个ASP,CGI等程序)的位置( 相对地址或绝对地址)

4.enctype:设置表单资料的编码方式（设置表单信息提交的编码方式）

有以下几种：

   （1）TEXT/plain:以纯文本形式传送信息；

   （2）Application/x-www-Form-urlencoded:默认的编码形式；

   （3）Multipart/Form-data:使用MINE编码。

 

5.target:设置返回信息的显示方式（设置表单信息返回的窗口）

target的值有以下几种：

（1）_blank:将返回信息显示在新开的浏览器窗口中

（2）_parent:将返回信息显示在父级浏览器窗口中

（3）_self:将返回信息显示在当前浏览器窗口中

（4）_top:将返回信息显示在顶级浏览器窗口中

（5）framename:将返回信息显示在指定框架中