初学HTML 表单交互标签

　　表单标签在网站中主要负责的是进行与用户间的交互, 如果没有了交互, 那么网站就只是一个展示, 会死气沉沉的.

　　<form>表单标签

　　<form>表单标签可以把浏览者(也就是我们用户自己)输入的数据传送到服务器端, 这样服务器程序就可以处理表单传过来的数据, 完成与用户的交互, 在任何的开发中, 交互永远都是灵魂, HTML的交互和其他开发的交互一样, 一般使用get或者post方式(get请求是直接使用完整的字符串网址进行数据的请求和上传, 优点是方便快捷, post请求分为连接头和请求参数(bodyString), 所以需要进行拼接, 具体详细的属于后端开发者需要考虑的问题, 感兴趣的同学可以单独的进行学习).

　　<form>标签的语法

　　直接使用一段代码为大家解释一下

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>表单标签</title>

 </head>

 <body>

 <form method="post" action = "data.php">

       <label for="username">用户名:</label>

       <input type="text"  name="username" id="username" value="" /><br />

       <label for="pass">密码:</label>

       <input type="password"  name="pass" id="pass" value="" />    <br />

       <input type="submit" value="确定"  name="submit" />

       <input type="reset" value="重置" name="reset" />

 </form>

 </body>

 </html>

　　method属性是指和后台交互的具体方式(get, post), 前面已经有较为详细的介绍了.

　　action属性是指表单提交的地址, 一般是.php为后缀的文件, 这样方便和后台的交互.

　　上文中涉及了一些之外的, 但是包含在表单标签之中的, 单独拿出来写.

　　<input>输入标签

　　<input>输入标签是在我个人理解属于一种声明, 意思就是下面将会开始人机交互了, 它具有几个参数, 最重要的参数type决定了input显示给用户的输入类型, 比如"text"意思就是文本输入, "button"就是按钮操作, "password"就是密码输入框, 如果有一定的英文基础会很舒服, 不过写过两三次就好理解啦, 大家多写多记忆就好了, name是指为文本框命名, 这样方便后台程序ASP, PHP的使用. value是为文本输入框设置默认值, 一般作为提示等作用(前提是文本输入框, 在不同的type类型中, value充当着不同的角色).

　　<input>标签type属性的几种类型

　　text, password上面已经说过了, 下面讲一些其他的

　　submit, 提交数据按钮, 当用户需要提交表单信息到服务器时, 需要用到提交按钮, 这个时候value属性会是提交按钮上面显示的文字.

　　reset, 重置按钮, 这个的value属性和上面一样的, 只是功能是将表单信息重置到初始时的状态,

　　radio, 单选框, 也就是我们平常点击的小圆点, 点击后为选定状态, 再点击就没有效果了那种, checkbox, 复选框, 这个是我们平常用的那种小方块, 点击后里面会是一个小对号的那种. 不过如果参数为radio/checkbox后, value属性是指提交到服务器的具体的值, 比如0和1, 代表假和真. name还是命名, checked是指该项的选中状态, 如果属性值为"checked"是指默认即被选中.

　　<selected>下拉列表选择标签

　　<selected>标签类似于<table>标签, 它声明了一种状态, 在这个标签内部的<option>标签, 就类似于<table>标签内部的<tr>标签一样, <selected>和<option>标签共同组合成了一个下拉的列表标签, 不同的<option>标签对应着不同的选择情况. <selected>标签内部有一个属性mutiple, 当设置为"multiple"时, 那么下拉列表将支持多选(Windows下Ctrl + 单击, Mac下Command + 单击).

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>下拉列表框</title>

 </head>

 <body>

 <form action="data.php" method="post" >

     <label>开发语言:</label>

     <select>

       <option value="Objective-C">Objective-C</option>

       <option value="Swift">Swift</option>

       <option value="Java">Java</option>

       <option value="C++">C++</option>

     </select>

 </form>

 </body>

 </html>

　　代码效果

　　这个时候在<option>标签中设置selected属性, 值为"selected"那么那个<option>选项就会被默认选中.

　　<textarea>文本域标签

　　<textarea>标签大家通过英语就能看出来大致的意思了, 也就是在一个区域中都可以使用文本输入框的一切特性, 对应的它有两个参数, rows(行数), cols(列数), 设置之后将直接影响文本区域的尺寸, 如果学习过css之后, 可以通过width和height两个属性来修改, 效果也是一样的.

　　<label>文本标签

　　<label>标签我比较习惯称之为文本类的标签, 它并不会向用户呈现什么效果, 主要的用途是方便了鼠标用户点击范围的可选性, 也就是加入label后面有个单选框或者复选框, 当你点击与之相关联的label标签时, 也可以实现点击对应框的效果, 不过需要设置label的for属性, 要求要与对应的输入框id相同.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>form中的lable标签</title>

</head>

<body>

你对什么语言感兴趣:

<form>

   <label for="Objective-C">Objective-C</label>

   <input type="checkbox" name="OC" id="Objective-C"/>

   <br />

   <label for="Swift">Swift</label>

   <input type="checkbox" name="SW" id="Swift" />

   <br />

   <label for="Java">Java</label>

   <input type="checkbox" name="JV" id="Java">

</form>

</body>

</html>

　　这个代码实现的功能即是点击文字, 复选框即关联点击效果.