一、常用表单标签如下:

(1)<input>中的“type”属性:

   复选框-checkbox;单选按钮-radio;按钮-button;提交-submit;

(2)文本域

  行-cols;列-rows;

  

<form> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 按钮

 二、常见表单标签的应用

  1、输入用户名以及密码表单的制作

    (1)主要代码:

        <form>
              用户名:<input type="text" />
                密码:<input type="password" />
                <br />
         </form>

    (2)实现效果:

  2、复选框的使用:

    (1)主要代码:

     <form>
            你喜欢的水果有?<br />
            苹果<input type="checkbox" />
            西红柿<input type="checkbox" />
            香蕉<input type="checkbox" />
            菠萝<input type="checkbox" />
     </form>

    (2)实现效果:

  3、单选按钮的使用:

    (1)主要代码:

      <form>

       请选择您的性别:
            男<input type="radio"  name="sex"/>
            女<input type="radio" name="sex"/>
      </form>

    (2)实现效果:

  4、下拉列表的使用

    (1)主要代码

      <form>

         <select>
                <option>www.baidu.com</option>
                  <option>www.jikexueyuan.com</option>
                  <option>www.google.com</option>
              </select>

      </form>

    (2)实现效果

  5、按钮的使用

    (1)主要代码

      <form>

       <input type="button" value="按钮" /><br />     //“value”用来定义按钮上面的值
            <input type="submit" /> <br />
            <input type="reset" /><br /><br />        //”reset“用来重置表单里的内容
       </form>

    (2)实现效果

  

6、文本框的使用

    (1)主要代码

      <textarea cols="10" rows="15">在此输入文字</textarea>

    (2)实现效果

HTML5中表单的创建的更多相关文章

  1. HTML5中表单验证的8种方法(转)

    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...

  2. HTML5中表单验证的8种方法

    HTML5中表单验证的8种方法 2012-4-21 11:00| 发布者: benben| 查看: 2765| 评论: 0 摘要: 前一篇,我们介绍了HTML5中新的表单特性和函数, 今天就继续来谈谈 ...

  3. HTML5中表单元素的formaction属性

    在submit按钮中,根据不同的submit按钮,将表单提交到不同的页面中: <form id="test" action="test.jsp"> ...

  4. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  5. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  6. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  7. html5表单重写

    html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...

  8. HTML5: HTML5 表单属性

    ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...

  9. 118.django中表单的使用方式

    表单 HTML中的表单: 从前端来说,表单就是用来将数据提交给服务器的,不管后台使用的是django还是php等其他的语言.只要把input标签放在form标签中,然后再添加一个提交的按钮,就可以将i ...

随机推荐

  1. 【BZOJ】1069: [SCOI2007]最大土地面积(凸包+旋转卡壳)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1069 显然这四个点在凸包上,然后枚举两个点找上下最大的三角形即可. 找三角形表示只想到三分QAQ.. ...

  2. 【wikioi】1553 互斥的数(hash+set)

    http://wikioi.com/problem/1553/ 一开始我也知道用set来判a[i]/p是否在集合中,在的话就直接删掉. 但是我没有想到要排序,也没有想到当存在a,b使得a/p==b时到 ...

  3. shell运算

  4. JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,接下来为大家介绍具体的解决方法 在JS中无论是setTimeout还是s ...

  5. QRadioButton 使用方法

    QRadioButton 控件是Qt中实现多选一功能的控件,它的使用方法如下: 声明控件: QRadioButton *rbutton; 然后实现它的响应函数: void YourClass::on_ ...

  6. lightning mdb 源代码分析(2)

    本系列前一篇已经分析了lightningmdb的整体架构和主要的数据结构.本文将介绍一下MMAP原理以及lmdb中如何使用它. 1. Memory Map原理 内存映射文件与虚拟内存有些类似,通过内存 ...

  7. U-Mail邮件服务系统任意文件上传+执行漏洞(runtime缺陷与验证绕过)

    http://www.wooyun.org/bugs/wooyun-2010-061859

  8. Css3 - 全面学习

    css3实验.生成.学习网站 http://www.css3maker.com/ http://www.css3.me/ 查询前缀和兼容性 http://caniuse.com/ 1.文本阴影 < ...

  9. 最基本的session保存法,类似于默认的files方法

    关于session的几个补充函数 在PHP下,关于session的讨论很多,其实在PHP4中还有几个函数是我们平时没有注意到的. 下面我把它们介绍给大家吧. 其中的session_set_save_h ...

  10. nodejs:本地文件夹http服务器http-server

    一.已经安装nodejs的电脑,有一个方便通过http访问本地文件夹.文件夹服务器 static files over HTTP,并不是我们平常说的node那个web服务器哦 二.好处 可以方便实现跨 ...