【3.6】HTML表单和输入

August 15, 2015 html 阅读量：次

一、表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素表单使用表单标签（<form>）定义。

<form>
...
 input 元素
...
</form>

二、输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

2.1文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>
注：这里的双引号“是因为输入，我mac text_edit编辑器以为是自动引号，转化位中文的，不停出错

2.1单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

2.3复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

2.4表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.asp” 的页面。该页面将显示出输入的结果。

三、讨论：

3.1 submit和button的区别

submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上，submit会提交表单，button不会提交表单.

两者主要区别在于：

submit默认为form提交，可以提交表单（form）.

button则响应用户自定义的事件,如果不指定onclick等事件处理函数，它是不做任何事情.当然，button也可以完成表单提交的工作.

INPUT type=submit 即发送表单,按回车提交表单

INPUT type=button 就是单纯的按钮功能,提交的是innerTEXT

3.2 在html中让一个text输入框的默认日期是今天

 <br>
<INPUT TYPE="text" id="myDate"> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var now = new Date(); 
myDate.value=now.getYear() + "-"+ (now.getMonth()+1)+"-"+now.getDate(); 
//--> 
</SCRIPT> 
<br>

3.3 为空不能提交

完成一个html表单后，有时候我们需要表单中某些位置不能为空。这个时候就需要js来设置一下了。

<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
 $("#turn_result").click(function(){
 if (checkall()){
 $("#form_input").submit();}
 });
 });

function checkall(){
   var email = $("#input_email");
   var snp_name = $("#input_name");
   if(email.val() == ""){
      alert("邮箱不可为空");
      return false;
   }
   else if(snp_name.val() == ""){
      alert("SNP不能为空");
      return false;
   }
   else return true;
}
</script>

3.4 在Html表单中设置好option选项后

<script src="../js/jquery-1.11.1.js"></script><script src="../js/bootstrap.min.js"></script><td colspan="1" size="6">Which_taqman:<select name="which_taqman" id="which_taqman_id" onchange="change_probe_length();"> <option selected="selected">Taqman_MGB</option> <option>Taqman</option> </select> </td>

其中option selected="selected"设置为默认选项

想实现表单中该选项不一样，然后对应的表单中某个默认值就不一样

	<script src="../js/jquery-1.11.1.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script type="text/javascript">
	
	function change_probe_length(){
		 var values=$("#which_taqman_id").val()
				if (values=="Taqman_MGB"){
					 $("#max_taqman_mgb_probe_length_id").val(25);}
				else {$("#max_taqman_mgb_probe_length_id").val(30);};
	};
	</script>