你的位置:首页 > 网页设计

[网页设计]初学HTML 表单交互标签


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

  <form>表单标签

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

  <form>标签的语法

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

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>表单标签</title> 6 </head> 7 <body> 8 <form method="post" action = "data.php"> 9    <label for="username">用户名:</label>10    <input type="text" name="username" id="username" value="" /><br />11    <label for="pass">密码:</label>12    <input type="password" name="pass" id="pass" value="" />  <br />13    <input type="submit" value="确定" name="submit" />14    <input type="reset" value="重置" name="reset" />15 </form> 16 </body>17 </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 + 单击).

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>下拉列表框</title> 6 </head> 7 <body> 8 <form action="data.php" method="post" > 9   <label>开发语言:</label>10   <select>11    <option value="Objective-C">Objective-C</option>12    <option value="Swift">Swift</option>13    <option value="Java">Java</option>14    <option value="C++">C++</option>15   </select>16 </form>17 </body>18 </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>

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