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="password" 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="resizenone"></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:将返回信息显示在指定框架

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章