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

  <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. Yii与表单交互的三种模式2

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

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

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

  3. html5 form表单常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. form表单类标签汇总

    <form action="form_action.asp" method="get"> First name: <input type=&q ...

  5. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...

  6. 五、Html表单标签

    表单,表单控件的主要作用就是收集用户体验,当用户提交表单时,用户输入的内容将作为请求参数提交到远程服务器. 1,form标签 <form>:创建表单,该元素不会生成可视化的界面,但是其他控 ...

  7. Form表单学习网站

    HTML表单 -- form标签 -- 与浏览者交互:http://www.dreamdu.com/xhtml/tag_form/

  8. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  9. knockoutJS学习笔记08:表单域绑定

    前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...

随机推荐

  1. python re模块search()与match()区别

    re.search()搜索字符串并返回结果. 整个字符串搜索. re.match()匹配字符串并返回结果 从开始处匹配. 所以,match()可以理解为search()的一个子集.

  2. C# 提取Word文档中的图片

    C# 提取Word文档中的图片 图片和文字是word文档中两种最常见的对象,在微软word中,如果我们想要提取出一个文档内的图片,只需要右击图片选择另存为然后命名保存就可以了,今天这篇文章主要是实现使 ...

  3. 修复 ThinkPHP3.2.3 抛出异常模块的一个BUG,关闭字段缓存功能

    使用 ThinkPHP3.2.3 遇到一个奇怪的问题,正式环境上报错,提示 “页面错误!请稍后再试~” 为了查看到底出啥错误,哪里出错,于是在入口文件中加了一段代码,开启调试: defined('AP ...

  4. 用JS控制video暂停再播放

    模块就是用来进行封装,进行高内聚 低耦合的功能.其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入.那么我们看模块是否有 ...

  5. Myeclipse2016部署tomcat服务(别的服务类似)配置环境

    1.在工具MyEclipse的项目管理菜单中,右单机找Properties或者快捷键alt+enter,(或者直接搜索Runtimes)myEclipse/Targeted Runtimes 2.ne ...

  6. BestCoder Valentine&#39;s Day Round

    昨晚在开赛前5分钟注册的,然后比赛刚开始就掉线我就不想说了(蹭网的下场……),只好用手机来看题和提交,代码用电脑打好再拉进手机的(是在傻傻地用手机打了一半后才想到的办法). 1001,也就是 hdu ...

  7. 论文笔记之:Learning Multi-Domain Convolutional Neural Networks for Visual Tracking

    Learning Multi-Domain Convolutional Neural Networks for Visual Tracking CVPR 2016 本文提出了一种新的CNN 框架来处理 ...

  8. linux 显示当前用户信息

    1.w命令 2.who命令 3.who am i 4. users

  9. 在VB中使用Linq To SQLite注意事项

    昨天使Linq To SQLite 支持VB,今天在VB中写了几条Linq语句,发现了几个问题: 1.在Linq To SQLite中的Linq语句查询后并不是得到的匿名数据类,而是将Linq转换为S ...

  10. CPU Benchmarks

    http://www.cpubenchmark.net/high_end_cpus.html 非常清楚~~~