仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1147|回复: 8
打印 上一主题 下一主题

[HTML5] 来一发HTML言语分析(八) 表单标志

[复制链接]
因胸联盟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:30:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5viewport的使用能帮你做到这一点……  表单标志
  <FORM><INPUT>
  INPUT的品种:Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。
  <SELECT><OPTION>
  <TEXTAREA>
  ■引子
  表单的用途良多,于网上无处不见,固然是共同CGI利用为佳,以是馈下成心利用或学习CGI的话,表单计划见必须的,这一节先容的标志未几,但其参数变更良多。一份表单的基础架构是:在<FORM>标志的包抄下加上一种或以上的表单输出体例及一个或以上的按键。
  ■<FORM><INPUT>:
  <FORM>称为表单标志,用以宣布此为表单形式,属于一个容器标志,暗示别的表单标志必要在它的包抄中才无效,<INPUT>即是个中的一个,用以设定各类输出材料的办法。它是一个空标志。
  
  <FORM>的参数设定(经常使用):

  比方:<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
  ● action="http://your.isp.com/cgi-local/example.cgi"
  表单一般是与CGI共同利用的,参数action即是用以指明该CGI程式的地位,这样此表单所填的材料才干准确传给CGI作处置。若馈下没有CGI以举行测试,可设定此参数为ACTION="mailto:your@email.com"那样该表单所填的材料将会寄至此电邮地点(白色部分)。

  ● method="POST"
  传送材料给CGI的的体例,可选值为POST,GET。你只需记着POST允许传送大批材料,但GET则只承受低于1K的资料,以是你若看过他人的表单原始码的话,你会发明请求表单用的是POST而搜找器用的是GET。
  <INPUT>的参数设定(经常使用):
  因为其第一个参数type己有良多的选择,而分歧的选择暗示出分歧的输出体例,且别的参数亦因而而异,故以下将自力先容分歧输出体例及别的参数设定。
  ● type="Text"
  可选值为Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button。
  输出体例一:Text(单行笔墨盒)
  比方<inputtype="Text"name="age"value="20"align="MIDDLE"size="2"maxlength="255">
  ● type="Text"
  输出体例为Text,能发生一单行笔墨盒,下限为255字元。
  ● name="age"
  此一单行笔墨盒称号,这是最主要的一个,便利CGI识别由表单传来的材料,虽说可任意定名,但一般CGI程式中都有指命名称,若转用别的称号便必要修正该CGI程式了,称号可为没空缺没出格标记的英文或数字,有巨细写的分离,能够写成Your_Age,如有访客于此表单此一笔墨盒填进40的话,那么传给CGI的字串即是Your_Age=40。
  ● value="20"
  此一单行笔墨盒内定值。若不填写则笔墨盒是空缺的,守候访客亲身键进,若value="20"的话,20便会呈现在笔墨盒中,固然访客能够修正之。
  ●align="MIDDLE"
  可选值:top,middle,bottom,left,right,texttop,baseline,absmiddle.没太年夜有处。
  ● size="2"
  此一单行笔墨盒显现的长度,若馈下是接纳Big5编码的中文网页便要当心,同size的笔墨盒NC会显现得比IE狻长。
  ● maxlength="255"
  此一单行笔墨盒可输出字元的下限,为便利编排材料或制止错输出等,宜设定上限,比方输出德律风或ICQUIN的可设为8,岁数为2等。
  例子:
始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
请填进德律风号码:<inputtype="Text"name="phone"value=""size="10"maxlength="8">
</form>显现了局请填进德律风号码:


  输出体例二:Radio(单一选择)
  比方:<inputtype="Radio"name="gender"value="female"align="MIDDLE"checked>
  ● type="Radio"
  输出体例为Radio,能发生一单一选择,以供点选。

  ● name="gender"
  此一Radio称号,参考Text部分的申明。
  ● value="female"
  内定值。每个radio必需及唯一一个value,一般有同时接纳两个或以上同name分歧value的  Radio输出体例,可以让利用使任选其一。
  ● align="MIDDLE"
  可选值:top,middle,bottom,left,right,texttop,baseline,absmiddle。
  ● checked
  设该Radio为内定被选。同name的各个Radio中只能有一个利用,或全不利用这参数。
  例子:
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
请选性别:
<inputtype="Radio"name="gender"value="Female">女性
<inputtype="Radio"name="gender"value="Male"checked>男性
<br>你喜好吗:
<inputtype="Radio"name="like"value="Yes">喜好
<inputtype="Radio"name="like"value="No">不喜好
<inputtype="Radio"name="like"value="NotSure">不愿定
</form>显现了局请选性别:女性男性
你喜好吗:喜好不喜好不愿定



[1][2][3]下一页


</P>
  输出体例三:Checkbox(确认盒)
  比方:<inputtype="Checkbox"name="idol"value="Leon"align="RIGHT"checked>
  ● type="Checkbox"
  输出体例为Checkbox,能发生一确认盒,以供剔选。
  ● name="idol"
  此一Checkbox称号,参考Text部分的申明。
  ● value="Leon"
  内定值。每个Checkbox必需及唯一一个value,当被剔选时这值便会传及CGI,比方所传字串idol=Leon。
  ● align="RIGHT"
  可选值:top,middle,bottom,left,right,texttop,baseline,absmiddle。

  ● checked
  设该Checkbox为内定被选。每一个Checkbox都是自力的,以是每个都可以使用这参数,不像Radio。
  
  例子:
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
你喜好以下那些明星:
<br><inputtype="Checkbox"name="idol01"value="Leon">拂晓
<inputtype="Checkbox"name="idol02"value="Noriko_Sagai">酒井办法
<inputtype="Checkbox"name="idol03"value="Leon">郑秀文
<inputtype="Checkbox"name="idol04"value="BonJovi"checked>BonJovi
</form>显现了局你喜好以下那些明星:
拂晓酒井办法郑秀文BonJovi
  输出体例四:Password(暗码输方盒)
  比方:<inputtype="Password"name="pw"value="999"align="MIDDLE"size="5"maxlength="9">
  ● Password的其他参数和Text是完整不异的,请参考Text的先容。
二者感化分歧,Password所输出的字元全以*号暗示。
  例子:
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
请输出姓名:<inputtype="Text"name="name">
<br>请输出暗码:<inputtype="Password"name="pw"maxlength="9">
</form>显现了局请输出姓名:
请输出暗码:


  输出体例五:Submit(传送键)及Reset(扫除键)
  这是表单上主要的两个按键,二者所附带的参数不异,但用途不年夜。
  比方:<inputtype="Submit"name="other_funtion"value="断定"align="MIDDLE">
<inputtype="Reset"value="扫除"align="MIDDLE">
  ● type="Submit"
  设定输出体例为Submit或Reset。
  ● name="other_funtion"
  Submit的功效随name的分歧而分歧,须和CGI共同。若你只必要一般的传送键,则是其内定,不用用此参数。
  ● value="断定"
  这个值不是输给CGI的,而是显现在按键上,能够不必,传送键的内定值为SubmitQuery,扫除键的内定值为Reset。
  ● align="MIDDLE"
  可选值:top,middle,bottom,left,right,texttop,baseline,absmiddle。
  例子:
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
<inputtype="Submit"><inputtype="Reset">
<br><inputtype="Submit"value="断定"><inputtype="Reset"value="扫除">
</form>显现了局

  输出体例六:Image(图片按键)
  这一般用以代替Submit及Reset两个按键,由于由程式发生的按键其实不大度,这Image参数便允许你接纳自已打造的按键。
  比方:<inputtype="Image"name="submit"align="BOTTOM"src="ex_icon.gif">
  ● type="Image"
  输出体例为Image。
  ● name="submit"
  所要代表的按键,能够是submit,reset,或别的。
  ● align="BOTTOM"
  可选值:top,middle,bottom,left,right,texttop,baseline,absmiddle。
  ● src="ex_icon.gif"
  按键图片来历,若此图片文件不与该html文件在统一目次下,请加上绝对或相对路子。
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
<inputtype="Image"name="submit"align="BOTTOM"src="ex_icon.gif">
</form>显现了局


  输出体例七:File
  比方:<inputtype="File"name="upload"align="BOTTOM"size="20"maxlength="100"accept="text/html">
  ● inputtype="File"
  输出体例为Image。一般用以传输文件。
  ● name="upload"
  这文件传输的称号,用以辨认之用。
  ● align="BOTTOM"
  可选值:top,middle,bottom,left,right,texttop,baseline,absmiddle。
  ● size="20"
  所显现笔墨盒的长度。
  ● maxlength="100"
  可输出字元的下限。
  ● accept="text/html"
  所承受的文件种别,有二十六种选择,但可不设定。
  例子:
始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
<type="File"name="upload"size="30"maxlength="100"accept="text/html">
</form>显现了局
  输出体例八:Hidden
  比方:<inputtype="Hidden"name="ID"value="6618">
  ● type="Hidden"
  输出体例为埋没或内定。它不会显现任何输出介面,而是一个内定值随表单一同传给CGI,列如由CGI发生的会员号码,或传进可变动的参数以调剂CGI而制止修正CGI程式码。
  ● name="ID"
  这文件传输的称号,用以辨认之用。
  ● value="6618"
  内定值,会以如ID=6618情势传给CGI。
  例子:("Hidden"是不被显现的,以是这处多放了一个"Submit"键,暗示Hidden以内定值会随submit键被按而传给CGI)
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
<inputtype="Hidden"name="ID"value="6618">
<inputtype="Submit"value="Submit">
</form>显现了局


上一页[1][2][3]下一页


</P>
  输出体例九:Button
  ■<SELECT><OPTION>:
  比方:<inputtype="Button"name="useless"value="Back">
  ● type="Button"
  输出体例为一样平常按键。常共同JavaScript作为其启动按键。
  ● name="useless"
  这文件传输的称号,用途不年夜。
  ● value="Back"
  按键显现称号。
  例子:个中Button"value="回前一页">
</form>显现了局
  ■<SELECT><OPTION>:
  <SELECT>是卷动选单标志,每选项皆由<OPTION>所标示,把它看成围堵标志或空标记利用都能够。
  <SELECT>的参数设定(经常使用):
  比方:<selectname="where"size="6"multiple>
  ● name="where"
  这卷动选单的称号,作辨认之用,将会传及CGI。
  ● size="6"
  这卷动选单的列数,即其高度,请自行修正。若利用此参数则不会有PopUp效果。
  ● multiple
  令这卷动选单允许多重选择。
  <OPTION>的参数设定(经常使用):

  比方:<optionvalue="tw"selected>
  ● value="tw"
  这选项的值,将会传及CGI。请自行修正,但分歧选项必需有分歧的值。
  ● selected
  设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
 例子一:(一般POPUP卷动选单)
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">Whereyoucomfrom?
<selectname="where">
<optionvalue="hk">HongKong</option>
<optionvalue="tw"selected>Taiwan</option>
<optionvalue="cn">China</option>
<optionvalue="us">UnitedStates</option>
<optionvalue="ca">Canada</option>
</select>
</form>显现了局Whereyoucomfrom?
HongKongTaiwanChinaUnitedStatesCanada
  例子二:(允许多重选择的卷动选单)

  例子三:(设定了Size的卷动选单)
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">Whereyoucomfrom?
<selectname="where"size="5">
<optionvalue="hk">HongKong</option>
<optionvalue="tw"selected>Taiwan</option>
<optionvalue="cn">China</option>
<optionvalue="us">UnitedStates</option>
<optionvalue="ca">Canada</option>
</select>
</form>显现了局Whereyoucomfrom?
HongKongTaiwanChinaUnitedStatesCanada
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">Whereyoucomfrom?
<selectname="where"multiple>
<optionvalue="hk">HongKong</option>
<optionvalue="tw"selected>Taiwan</option>
<optionvalue="cn">China</option>
<optionvalue="us">UnitedStates</option>
<optionvalue="ca">Canada</option>
</select>
</form>显现了局Whereyoucomfrom?
HongKongTaiwanChinaUnitedStatesCanada

  ■<TEXTAREA>:
  <TEXTAREA>是表单笔墨区块标志,经常使用于bugreport,feedback等必要填写大批材料的用处。
  <TEXTAREA>的参数设定(经常使用):
  比方:<textareaname="comments"cols="40"rows="4"wrap="VIRTUAL">
  ● name="comments"
  这笔墨区块的称号,作辨认之用,将会传及CGI。
  ● cols="40"
  这笔墨区块的宽度,请自行修正。
  ● rows="4"
  这笔墨区块的列数,即其高度,请自行修正。
  ● wrap="VIRTUAL"
  设定其折行成绩,可选值为:off,physical,virtual。off暗示不利用此属性,physical时则会强制刘览器在送材料到CGI(Web伺服器端)必需将实№笔墨中的换行一并送出,设为virtual时则送出一连成串的字(除非利用者按了键盘的RETURN/ENTER)。
  例子:
原始码<formaction="http://your.isp.com/cgi-local/example.cgi"method="POST">
Givecomments:
<textareaname="comments"cols="40"rows="4"wrap="VIRTUAL">
这是预设的字句,一般留空的,随你喜好。</textarea>
</form>显现了局Givecomments:
这是预设的字句,一般留空的,随你喜好。
</p>
上一页[1][2][3]

</p>
每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5viewport的使用能帮你做到这一点……
简单生活 该用户已被删除
沙发
发表于 2015-1-17 22:59:09 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
灵魂腐蚀 该用户已被删除
板凳
发表于 2015-1-24 15:45:25 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
柔情似水 该用户已被删除
地板
发表于 2015-2-2 10:18:09 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-7 18:37:40 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
小魔女 该用户已被删除
6#
发表于 2015-2-23 01:10:39 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
莫相离 该用户已被删除
7#
发表于 2015-3-7 06:47:05 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
山那边是海 该用户已被删除
8#
发表于 2015-3-14 17:11:52 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
蒙在股里 该用户已被删除
9#
发表于 2015-3-21 13:50:09 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 06:55

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表