首頁 > web前端 > html教學 > HTML系列(九):表单_html/css_WEB-ITnose

HTML系列(九):表单_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:25:00
原創
925 人瀏覽過

一、表单标签form

     表单标签用于申明表单,定义采集数据的范围,即

包含的数据将被提交到数据库上,包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

     表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。还可以包含 menus、textarea、fieldset、legend 和 label 元素。

三个重要的属性说明:

  1、action指定该表单发送时接受操作的地址

  2、method指定表单数据发送的方法。可选值:get、post。get发送则表单内的数据将附加到url后发送(不赞成使用)。post则是在HTTP请求中发送。

  3、enctype指定表单数据在发送的服务器之前如何编码,特别注意的是,当含有上传域时要设置编码方式为enctype="multipart/form-data", 否则后台无法获取到浏览器发送的文件数据。是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form- urlencoded,不能用于文件上传;只有使用了multipart/form-data,form里面的input的值以2进制的方式传过去。才能 完整的传递文件数据。FTP上传大文件的时候,也有个选项是以二进制方式上传。

enctype的三个选项值 描述
application/x-www-form-urlencoded 在发送前编码所有字符(默认的编码方式)
multipart/form-data MIME编码。以二进制的方式发送数据,当表单含有上传域时,必须使用后台才能获取上传的文件。
text/plain 以纯文本形式发送

 

二、input标签

     标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

1、文本域

<input type="text" name="控件名称" size="控件长度" maxlength="填写最长字符数" value="文字字段默认值" />
登入後複製

2、密码域

  密码跟文本框类似,但是在里面输入的内容显示为圆点。

<input type="password" name="控件名称" size="控件长度" maxlength="填写最长字符数" value="文字字段默认值" />
登入後複製

3、单选按钮

<input type="radio" name="单选按钮名称" value="单选按钮的取值" checked="checked" /><br />
登入後複製
男人:<input type="radio" name="sex" value="male" /><br />女人:<input type="radio" name="sex" value="female" /> 
登入後複製

checked属性表示该项被默认选中。

4、复选框

<input type="checkbox" name="复选框的名称" value="复选框的值" checked="checked"/>
登入後複製

5、普通按钮

<input type="button" name="按钮名" value="按钮上面的文字" onclick="处理程序"/>
登入後複製

6、重置按钮

  当点击重置按钮时,重置按钮所在的表单将全部清空,而其他表单不受影响。

<input type="reset" name="按钮名" value="按钮上面的文字" />
登入後複製

7、提交按钮

  当点击提交按钮时,浏览器将自动提交表单。

<input type="submit" name="按钮名" value="按钮上面的文字" />
登入後複製

8、隐藏域

隐藏域在浏览器中并不显示,仅仅为保存一些不太重要的资料而存在,当用户提交表单时隐藏域的内容会一起提交。

<input type="hidden" name="隐藏域名称" value="提交的值" />
登入後複製

9、文件域

文件域在上传文件时常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传。在发送电子邮件、上传头像、传送文件时会看到这一控件。

<input type="file" name="文件域的名称" />
登入後複製

10、图片按钮

如果想用图片作为按钮来提高网页的美感,可以使用图像域创建图像提交按钮,这幅图片即具有按钮功能。

<input type="image" src="图像地址" name="图像域名称" />
登入後複製

三、下拉列表select

select 元素可创建单选或多选菜单。 元素中的

基本语法:

<select name="下拉菜单名称">    <option value="选项值" selected="selected">选项显示内容</option>    <option value="选项值">选项显示内容</option> ......</select>
登入後複製

selected表示默认选项。

四、文本域textarea