html旅程之输入域控件

浏览数：31 / 时间：2015年06月09日

在html的学习中，我们会遇到很多控件的学习。其中有一类叫做输入域的控件，可以承载用户输入的数据，也可以通过html改变数据的传递方式，或者它本身的样式。

我们可以根据性质将该类控件分为：文本型、按钮型、选择型三个小类：

其中每一种控件与VB控件的对应关系表示为：

技术分享

一、文本型

这种类型的控件都是以文本的形式呈现，可以直接将用户输入的文本数据承载下来，然后进行传递。

1.form：表单

主要属性有：action、method（get和post）、type、name.

PS：get和post的区别

1. get是从服务器上获取数据，post是向服务器传送数据。

2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。特别是在超链接的跳转时，get方法会将相应的URL地址直接加载到目前页面所在的网址之后，组成字符串的连接。而post的过程会直接实现页面跳转，地址栏的网址不发生任何的变化，所以用户看不见这个过程。

3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

2.text：文本框

在该控件中，我们可以通过id来唯一标识控件，通过name来设置控件的名称，value可以设置控件的值（默认或者显示的值），size设置文本框的长度，maxsize设置最大长度。下面使用一段代码来验收总结：

<span style="font-size:18px;"><html>
	<head> 
		<title>演示text输入域</title>                        <!--设置该界面显示的标题 -->
	</head>
		<body>
			<h1>演示text</h1>
			<hr>
			<form action ="12.html" method="get">         
				姓名：<input type="text"> <br>      <!--默认类型为文本框，也可设置为text型 -->
				年龄：<input type="text" name="age"><br>
				<input type="submit" value="保存"> 
			</form>
		</body>
</html></span>

注：当我们文本框为密码项时，需要设置相应属性，使密码非原码显示则：

技术分享

3.textarea：文本说明域

它的形状和功能类似listBox控件，可以存放大量的文本数据，而textarea可以通过rows和cols的属性设置行和列。

二、按钮型

1.reset

也就是我们VB程序用到的“清空”按钮，而往日要实现的这种清空效果在html中只是对type属性的设置：

<span style="font-size:18px;">                        <input type="submit" value="保存(submit)"><br>    <!--提交按钮-->
			<input type="button" value="保存（button）"><br>  <!--普通按钮-->
			<input type="reset" value="保存（reset）"><br>    <!--重置类的按钮-->
			<input type="image" src="">                       <!--图片按钮--></span>

这四种按钮控件都是通过type属性的设置实现的，其中image和VB中的image控件一样，type=“button”的是最普通的按钮。

三、选择型

1.radio：单选框

单选框实现的前提是：所有的单选框name一致，否则将和多选框是一样的效果。

2.checkBox：复选框

3.selected

这是下拉列表的控件，也就是vs中用到的combox控件。默认情况下，我们只能选择下拉项中的一个，但是当我们设置multiple属性之后我们就可以实现多选的效果：

技术分享

<span style="font-size:18px;">                  <select name="language" multiple >  
				<option value="01">C语言</option>
				<option value="02">VB</option>  
				<option value="03">C#</option>
				<option value="04">delphi</option>
		</select></span>

尽管html是BS中的知识，而VB是刚入学就学过的“旧知识”，但html完全可以看做是VB的一种衍生品：通过更改个别属性控件便可以实现同样的效果。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html旅程之输入域控件