html之表单
来源:互联网 发布:金属探测器软件 编辑:程序博客网 时间:2024/06/06 17:46
表单可以用来在网页中发送数据,特别是经常被用在联系表单——用户输入信息然后发送到Email中,就像HTMLDog的这个连接页面。
表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML,你能够自助地找到一些简单的教程,开发一个服务器端的程序使一个发送到Email的表单工作。
实际用在HTML中的标签有form
、 input
、textarea
、 select
和option
。
表单标签form
定义的表单里头,必须有行为属性action
,它告诉表单当提交的时候将内容发往何处。
可选的方法属性method
告诉表单数据将怎样发送,有get
(默认的)和post
两个值。常用到的是设置post
值,它可以隐藏信息(get
的信息会暴露在URL中)。
所以一个表单元素看起来是这样子的:
<form action="processingscript.php" method="post">
</form>
input标签是表单世界中的“老大”。有10种形式,概括如下:
<input type="text" />
是标准的文本框。它可以有一个值属性value
,用来设置文本框里的默认文本。<input type="password" />
像文本框一样,但是会以星号代替用户所输入的实际字符。<input type="checkbox" />
是复选框,用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked
,像这样的格式<input type="checkbox" checked="checked" />
.<input type="radio" />
与复选框相似,但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked
,使用方法跟复选框一样。<input type="file" />
是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一样。<input type="submit" />
是一个被点击后提交表单的按钮。你可以用值属性value
来控制按钮上显示的文本(下面的button
和reset
类型也可以这样,稍后介绍),如下:<input type="submit" value="Ooo. Look. Text on a button. Wow" />
.<input type="image" />
以图像代替按钮文本,src
属性是必须的,像img
标签一样。<input type="button" />
是一个如果没有其他代码的话什么都不做的按钮。<input type="reset" />
是一个点击后会重置表单内容的按钮。<input type="hidden" />
不会显示任何东西,它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。
注意输入标签input
也是用“/>
”自关闭的。
多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows
和列属性cols
,用法像这样:
<textarea rows="5" cols="20">A big load of text here</textarea>
选定标签select
与选项标签option
一起可以制作一个下拉选框。是这样工作的:
<select>
<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
</select>
当表单被提交时,被选中选项的值将被发送。
与复选框和单选按钮的预选属性checked
一样,选项标签option
也有一个预选属性selected,它可以用在这样的格式中:<option value="mouse" selected="selected">Rodent</option>
。
上述的标签中在网页中看起来都不错,但是,如果你有一个程序来处理这个表单,这些标签都不起作用。这是因为,表单字段需要名称。所以所有的字段中都需要增加名称属性name
,比如<input type="text" name="talkingsponge" />
。
一个表单看起来应该像下面这样(注意:这个表单不会工作,除非有一个用来提交数据的“contactus.php”的文件,它位于表单标签form
的行为属性action
中。)
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
<p><input type="submit" /></p>
<p><input type="reset" /></p>
</form>
- HTML之表单
- HTML之表单
- HTML学习之表单
- html之表单
- html基础之表单
- HTML之表单标签
- Html之表单标签
- HTML之表单初识
- HTML之表单
- HTML之表单
- html之表单标签
- HTML之表单元素
- HTML学习之表单
- html之表单总结
- html之表单
- html 之表单form
- 《HTML之表单》
- HTML之交互式表单
- html的表格
- Spring
- 【POJ】 1017
- 前端优化网站方法整理
- 理解原型和实例的创建
- html之表单
- css的属性
- HTTP报文讲解和tcp三次握手和四次挥手
- Java面试个人整理(手打勿喷,易于个人学习)3
- vue2.0之axios使用详解
- TypeError: Value passed to parameter 'targets' has DataType float32 not in list of allowed values: i
- css的边界和补白
- Android_非UI:SpannableString
- ShaderLab: Blending