CSS教程之轻松玩转名堂表单

最新版本html5+CSS3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
　　本专题从最基本的表单常识，到表单的初级使用，让你有一个对照周全地熟悉，信任你在读完本专题今后，必定会对表单十分熟习。

1、表单概述

　　表单，在网页中的感化不成藐视，次要卖力数据收罗的功效，好比你能够收罗会见者的名字和e－mail地点、查询拜访表、留言簿等等。

1、表单的构成

　　一个表单有三个基础构成部分：

• 表单标签：这内里包括了处置表双数据所用CGI程序的URL和数据提交到服务器的办法。
  
• 表单域：包括了文本框、暗码框、埋没域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  
• 表单按钮：包含提交按钮、复位按钮和一样平常按钮；用于将数据传送到服务器上的CGI剧本大概作废输出，还能够用表单按钮来把持其他界说了处置剧本的处置事情。
  

　　为了顾及分歧的网页计划工具，本文只报告代码的计划，细报告操纵办法，上面就是表单的HTML代码计划要点：

1.1表单标签＜form＞＜/form＞

　　功效：用于声名表单，界说收罗数据的局限，也就是＜form＞和＜/form＞内里包括的数据将被提交到服务器大概电子邮件里。

　　语法：＜FORMACTION="URL"METHOD="GET|POST"ENCTYPE="MIME"TARGET="..."＞...＜/FORM＞

　　属性注释见下表：

action=url指定一来处置提交表单的格局.它能够是一个URL地点(提交给程式)或一个电子邮件地点.method=get或post指明提交表单的HTTP办法.大概的值为：

• post：POST办法在表单的骨干包括称号/值对而且无需包括于action特征的URL中.
  
• get：不同意。GET办法把称号/值对加在action的URL前面而且把新的URL送至服务器.这是往前兼容的缺省值.这个值因为国际化的缘故原由不同意利用.
  

enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体情势.这个特征的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的了局文档显现的地位：

• _blank：在一个新的、知名扫瞄器窗口调进指定的文档；
  
• _self：在指向这个方针的无素的不异的框架中调进文档；
  
• _parent：把文档调进以后框的间接的父FRAMESET框中；这个值在以后框没有父框时等价于_self；
  
• _top：把文档调进本来的最顶部的扫瞄器窗口中(因而作废一切别的框架)；这个值等价于以后框没有你框时的_self.
  

　　比方：
　　＜formaction="http://www.yesky.com/test.asp"method="post"target="_blank"＞...＜/form＞
　　暗示表单将向http://www.yesky.com/test.asp以post的体例提交，提交的了局在新的页面显现，数据提交的媒体体例是默许的application/x-www-form-urlencoded体例；
1.2表单域

　　表单域包括了文本框、多行文本框、暗码框、埋没域、复选框、单选框和下拉选择框等，用于收罗用户的输出或选择的数据，上面分离报告这些表单域的代码格局：

1.2.1文本框

　　文本框是一种让会见者本人输出内容的表单工具，一般被用来填写单个字大概冗长的回覆，如姓名、地点等。
　　代码格局：＜inputtype="text"name="..."size="..."maxlength="..."value="..."＞

　　属性注释：
　　type="text"界说单行文本输出框；
　　name属性界说文本框的称号，要包管数据的正确收罗，必需界说一个举世无双的称号；
　　size属性界说文本框的宽度，单元是单个字符宽度；
　　maxlength属性界说最多输出的字符数。
　　value属性界说文本框的初始值

样例1：

样例1代码：
＜inputtype="text"name="example1"size="20"maxlength="15"＞

1.2.2多行文本框

　　也是一种让会见者本人输出内容的表单工具，只不外能让会见者填写较长的内容。
　　代码格局：＜TEXTAREAname="..."cols="..."rows="..."wrap="VIRTUAL"＞＜/TEXTAREA＞
　　属性注释：
　　name属性界说多行文本框的称号，要包管数据的正确收罗，必需界说一个举世无双的称号；
　　cols属性界说多行文本框的宽度，单元是单个字符宽度；
　　rows属性界说多行文本框的高度，单元是单个字符宽度；
　　wrap属性界说输出内容年夜于文本域时显现的体例，可选值以下：

• 默许值是文本主动换行；当输出内容凌驾文本域的右侧界时会主动转到下一行，而数据在被提交处置时主动换行的中央不会有换行符呈现；
  
• Off，用来制止文本换行，当输出的内容凌驾文本域右侧界时，文本将向左转动，必需用Return才干将拔出点移到下一行；
  
• Virtual，同意文本主动换行。当输出内容凌驾文本域的右侧界时会主动转到下一行，而数据在被提交处置时主动换行的中央不会有换行符呈现；
  
• Physical，让文本换行，当数据被提交处置时换行符也将被一同提交处置。
  

样例2：

　　


样例2代码：
＜TEXTAREAname="example2"cols="20"rows="2"wrap="PHYSICAL"＞＜/TEXTAREA＞
　　
1.2.3暗码框

　　是一种特别的文本域，用于输出暗码。当会见者输出笔墨时，笔墨会被星号或别的标记取代，而输出的笔墨会被埋没。

　　代码格局：＜inputtype="password"name="..."size="..."maxlength="..."＞

　　属性注释：
　　type="password"界说暗码框；
　　name属性界说暗码框的称号，要包管数据的正确收罗，必需界说一个举世无双的称号；
　　size属性界说暗码框的宽度，单元是单个字符宽度；
　　maxlength属性界说最多输出的字符数。

样例3：

样例3代码：
＜inputtype="password"name="example3"size="20"maxlength="15"＞


1.2.4埋没域

　　埋没域是用来搜集或发送信息的不成见元素，关于网页的会见者来讲，埋没域是看不见的。当表单被提交时，埋没域就会将信息用你设置时界说的称号和值发送到服务器上。

　　代码格局：＜inputtype="hidden"name="..."value="..."＞

　　属性注释：
　　type="hidden"界说埋没域；
　　name属性界说埋没域的称号，要包管数据的正确收罗，必需界说一个举世无双的称号；
　　value属性界说埋没域的值
　　比方：＜inputtype="hidden"name="ExPws"value="dd"＞


1.2.5复选框

　　复选框同意在待选项当选中一项以上的选项。每一个复选框都是一个自力的元素，都必需有一个独一的称号。

　　代码格局：＜INPUTtype="checkbox"name="..."value="..."＞

　　属性注释：
　　type="checkbox"界说复选框；
　　name属性界说复选框的称号，要包管数据的正确收罗，必需界说一个举世无双的称号；
　　value属性界说复选框的值

样例4：yesky.comChinabyte.com

样例4代码：
　　＜inputtype="checkbox"name="yesky"value="09"＞yesky.com
　　＜inputtype="checkbox"name="Chinabyte"value="08"＞Chinabyte.com

1.2.6单选框

　　当必要会见者在待选项当选择独一的谜底时，就必要用到单选框了。

　　代码格局：＜inputtype="radio"name="..."value="..."＞

　　属性注释：
　　type="radio"界说单选框；
　　name属性界说单选框的称号，要包管数据的正确收罗，单选框都是以组为单元利用的，在统一组中的单选项都必需用统一个称号；
　　value属性界说单选框的值，在统一组中，它们的域值必需是分歧的。

　样例5：yesky.comChinabyte.com

样例5代码：
　　＜inputtype="radio"name="myFavor"value="1"＞yesky.com
　　＜inputtype="radio"name="myFavor"value="2"＞Chinabyte.com


1.2.7文件上传框

　　偶然候，必要用户上传本人的文件，文件上传框看上往和别的文本域差未几，只是它还包括了一个扫瞄按钮。会见者能够经由过程输出必要上传的文件的路径大概点击扫瞄按钮选择必要上传的文件。
　　注重：在利用文件域之前，请先断定你的服务器是不是同意匿名上传文件。表单标签中必需设置ENCTYPE="multipart/form-data"来确保文件被准确编码；别的，表单的传送体例必需设置成POST。

　　代码格局：＜inputtype="file"name="..."size="15"maxlength="100"＞

　　属性注释：
　　type="file"界说文件上传框；
　　name属性界说文件上传框的称号，要包管数据的正确收罗，必需界说一个举世无双的称号；
　　size属性界说文件上传框的宽度，单元是单个字符宽度；
　　maxlength属性界说最多输出的字符数。

　样例6：

样例6代码：
＜inputtype="file"name="myfile"size="15"maxlength="100"＞


1.2.8下拉选择框

　　下拉选择框同意你在一个无限的空间设置多种选项。

　　代码格局：
　　＜selectname="..."size="..."multiple＞
　　＜optionvalue="..."selected＞...＜/option＞
　　...
　　＜/select＞

　　属性注释：
　　size属性界说下拉选择框的行数；
　　name属性界说下拉选择框的称号；
　　multiple属性暗示能够多选，假如不设置本属性，那末只能单选；
　　value属性界说选择项的值；
　　selected属性暗示默许已选择本选项。

　样例7：yesky.comchinabyte.com

样例7代码：
　　＜selectname="mySel"size="1"＞
　　＜optionvalue="1"selected＞yesky.com＜/option＞
　　＜optionvalue="d2"＞chinabyte.com＜/option＞
　　＜/select＞

　样例8：
　　yesky.comchinabyte.cominternet.com按Ctrl能够多选

样例8代码：
　　＜selectname="mySelt"size="3"multiple＞
　　＜optionvalue="1"selected＞yesky.com＜/option＞
　　＜optionvalue="d2"＞chinabyte.com＜/option＞
　　＜optionvalue="3"＞internet.com＜/option＞
　　＜/select＞

1.3表单按钮

　　表单按钮把持表单的运作。

1.3.1提交按钮

　　提交按钮用来将输出的信息提交到服务器。

　　代码格局：＜inputtype="submit"name="..."value="..."＞

　　属性注释：
　　type="submit"界说提交按钮；
　　name属性界说提交按钮的称号；
　　value属性界说按钮的显现笔墨；

　样例9：

样例9代码：
＜inputtype="submit"name="mySent"value="发送"＞

<b/>
1.3.2复位按钮

　　复位按钮用来重置表单。

　　代码格局：＜inputtype="reset"name="..."value="..."＞

　　属性注释：
　　type="reset"界说复位按钮；
　　name属性界说复位按钮的称号；
　　value属性界说按钮的显现笔墨；

　样例10：

样例10代码：
＜inputtype="reset"name="myCancle"value="作废"＞


<b/>1.3.3一样平常按钮

　　一样平常按钮用来把持其他界说了处置剧本的处置事情。

　　代码格局：＜inputtype="button"name="..."value="..."onClick="..."＞

　　属性注释：
　　type="button"界说一样平常按钮；
　　name属性界说一样平常按钮的称号；
　　value属性界说按钮的显现笔墨；
　　onClick属性，也能够是别的的事务，经由过程指定剧本函数来界说按钮的举动；

样例11：

样例11代码：
　　＜inputtype="button"name="myB"value="保留"onClick="javascript:alert(itisabutton)"＞
</p>
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

仓酷云

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上