起步 - 表单控件

  • 作者：KK

  • 发表日期：2016.5.5

所谓的表单控件就是放在form标签里面的那些input,select等等,接下来详细说明一下常见的几种表单控件

  • 文本控件:input type=text

    就是<input type="text"/>这个,它是一个文本输入控件,我们可以在它上面输入各种文字字符

    如果直接按之前的例子就这样写在form里面,那触发submit后在PHP那里是收不到任何数据的,原因是我们没有给表单控件命名(没有name属性呀)

    form里面可以包含很多不同的表单控件,我们要为每一个表单控件都起一个名字来区别它们谁是A,谁是B,不然大家都没名字怎么知道你是什么数据呢?

    给表单控件命名很简单,添加一个name属性就可以,之前的name="age"大家已经试过了,属性值就是我们要起的名字,但不要起得太奇葩,一般用英数字下划线起名字就好了

    比如我们写成<input type="text" name="name"/>,然后顺便输入点东西,比如一个姓名"小明"吧,提交给PHP那边后就会在POST数组里看到name这个键(我这章节都默认按POST方法发数据,请不要用GET来尝试)

    但是请注意这个控件只能输入一行文字给PHP,比如你先输入"美丽的"然后按回车,当然你看不到换行,然后继续输入"花朵",触发submit提交

    假设控件的name叫"abc",然后咱们在PHP接收到数据的处理里这样写代码:

    file_put_contents('测试文件.txt', $_POST['abc']);

    运行后打开刚生成的"测试文件.txt",里面的文字就只是1行对吧,所以呢,要提交多行内容的话,那就得用下面的文本域控件了

  • 文本域控件

    和上面的"文本控件"不同,这个叫"文本域",它就是textarea标签,和文本控件的区别就是文本控件只能提交1行文字,但文本域控件可以提交多行,试下这个表单:

    <form action="/test.php" method="post">
	<textarea name="news" id="" cols="80" rows="10" placeholder="请填写新闻内容">今日XXX发生一起火灾事故"submit">提交

    虽然换成了textarea这个文本域控件,但要将它里面的文字提交给PHP让它装载进POST数组的话,那么还是要添加一个name属性的,像上面name="news"就是,则在PHP里是用$_POST['news']进行访问的了

  • 密码,数字,邮箱,日期控件

    这些控件和文本控件类似,这里一次性给出演示代码:

    <form action="/test.php" method="post">
	请输入密码:<input type="password" name="password"/><br/>
	请输入年龄:<input type="number" name="age"/><br/>
	请输入邮箱:<input type="email" name="email"/><br/>
	请输入日期:<input type="datetime-local" name="time"/>
</form>

    在以上控件中填写相关的内容提交后PHP就会收到相关的值,根据name产生相应的POST数组下标,但是千万不要认为type="password"这个控件的name就一定要叫"password",就算你写成<input type="password" name="passmord"/>都可以,因为name属性是独立的,你喜欢起什么名字就写什么名字,type只是用来控制这个input怎么显示,只有固定的一些type值可以用,不能自己随便写type,没有name那么自由

  • 下拉控件

    下拉控件就是select标签那个了,在这里提到过,在这里我们要先学习一下关于它的选中值的知识

    其实要显示一个带2个选项的下拉,并不是下面这样用option标签包住文字就算了的

    <select>
	<option>是</option>
	<option>否</option>
</select>

    这样确实是显示了"是"和"否"两个选项,但当你选中"是"的时候,程序也不容易知道你已经选中了"是"的

    正确的做法是为两个选项的option标签添加value属性,然后还给外面包着的select标签加一个id属性,比如这样:

    <select id="pass">
	<option value="1">是</option>
	<option value="0">否</option>
</select>

    然后就使用document.getElementById('pass').value来得到选中的结果,下面我给出一个完整的例子:

    <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>select控件测试</title>
	<script>
	function showResult(){
		var value = document.getElementById('like').value;
		if(value == 1){
			alert('哦你爱我啊!');
		}else{
			alert('誓要得到你!');
		}
			
		alert('id为like的select控件的value是 ' + value);
	}
	</script>
</head>
<body>
	你爱我吗?
	<select id="like">
		<option value="1">爱</option>
		<option value="0">才不爱</option>
	</select>
		
	<button type="button" onclick="showResult()">查看选中的值</button>
</body>
</html>

    这样一来可以看出,当选中的是哪一个option,那么select的value就是哪个option的value属性值,甚至你可以为这个option设置中文的值,这样嘛:<option value="不爱">不爱</option>,试试呗,但是实际上很少人这样用的,爱不爱,都用1和0表示,1就是爱,0就是不爱,或者有的人会用yes,no,反正不咋用中文的

    这个select的值要提交给PHP也是要添加name才可以的,比如

    <select name="like">
	<option value="1">爱"0">才不爱不爱

    这样PHP访问$_POST['like']就会得到选中的option的值了