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

  <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>

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

  

  

初学HTML 表单交互标签的更多相关文章

  1. web(四)html表单类标签

    表单类标签 操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...

  2. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  3. Yii与表单交互的三种模式2

    在yii的标签中加入css或js方法:echo $form->textField($model,'starttime',array(        'onclick'=>'alert(&q ...

  4. 表单相关标签之input标签

    用于搜集用户信息. <input type="text" name="fname" /> 标签属性 type 规定 input 元素的类型.输入字段 ...

  5. 表单相关标签之form标签

    表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...

  6. 前端开发-4-HTML-table&amp;form&amp;表单控制 标签

    1.table标签 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=" ...

  7. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  8. html表单相关标签及属性

    1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式 2.<label> ...

  9. ASP.NET MVC 与Form表单交互

    一,Form包含文件类(单选文件) <form id="ImgForm" method="POST" enctype="multipart/fo ...

随机推荐

  1. QT生成流水账号

    在做数据库课程的时候,要生成财务表,每条记录应该有一个流水账号. 实现思路: 当前时间+随机一个四位数 上代码 //生成流水号 QString adminRecharge::getNumber() { ...

  2. 2016湖大校赛 L题 The Sequence likes Ladder

    题意:S1=a,Sn=a*(Sn-1)^k%m,且有(a,m)=1,给出i,求Si. 思路:首先我们可以写出Sn的通项a^(1+k+k^2+...k^n-1);其次注意到m的范围是10000以内,所以 ...

  3. 关于搭建一个高性能网站的服务器的架设思路以及nginx测试的并发

    对于高性能网站的架设,主要就是请求量大,那我们该如何进行支撑? 考虑到下面的几个方面: 1.要减少请求,那对于开发人员来说,网站的css文件进行合并,背景图片也要合并,一般都是请求一张比较大的图片,然 ...

  4. 转:不是技术牛人,如何拿到国内IT巨头的Offer

    转自:http://blog.csdn.net/lsldd/article/details/13506263 不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛 ...

  5. systemd-journald详解

    配置文件详解 [Journal] #Storage=persistent Storage=persistent #Compress=yes #Seal=yes #SplitMode=uid #Sync ...

  6. 网络传入安全jwts

    使用json web token 发表于Aug 13 2014 由来 做了这么长时间的web开发,从JAVA EE中的jsf,spring,hibernate框架,到spring web MVC,到用 ...

  7. IOS开发-UIDynamic(物理仿真)简单使用

    UIDynamic是从IOS7开始引入的一种新技术,隶属于UIKit框架,我们可以认为是一种物理引擎能模拟和仿真现实生活中的物理现象,比如重力,弹性碰撞等. 可以让开发人员远离物理公式的情况下,实现一 ...

  8. [unix]commvault在unix系统上本地安装报“NFS directory cannot be used”

    远程安装持续的pending: 本地安装报“NFS directory cannot be used” 修改安装包 安装目录 的权限, 从777改回775. 就可以解决这个报错.

  9. JSON 与 JS 对象的区别与对比

    定义: JSON是什么?JSON是JS的一种简单数据格式,JSON是JavaScript原生格式,它是一种严格的js对象的格式,JSON的属性名必须有双引号,如果值是字符串,也必须是双引号. 问题: ...

  10. 763. Partition Labels

    我一开始看数据范围很小,没怎么想就直接暴力了. 暴力的思路是: 对于每一段S的前缀,这个前缀中的每一个字母都不应该在前缀的补集中出现,所以直接循环i:0 to S.length然后对于每一次循环,再循 ...