首先创建一个表单域集合fieldset

fieldset元素允许Web开发者将主题相关的表单组合在一起

<fieldset>

</fieldset>
要说明的是本例子中每个表单都被放在一个有序列表中，以及用了一个label标签，做说明
创建文本框
   1: <li>

   2:     <label for="name">名称:</label>

   3:     <input type="text" name="name" autofocus id="name">

   4: </li>

label的for属性，用于引用与其关联的表单元素的id。从WebStorm的语法高亮也可以看出

创建滑块

   1: <li>

   2:     <label for="priority_range">调整优先级</label>

   3:     <input type="range" min="0" max="100" name="priority" value="0" id="priority_range">

   4: </li>

同理for属性关联input中的id属性，其中min属性指定最小值，max属性指定最大值,value指定初始值

创建数值设定框

   1: <li>

   2:     <label for="adjust_number">调整数值</label>

   3:     <input type="number" name="estimated_hours" min="0" max="100" id="adjust_number" step="10">

   4: </li>

type属性设置input属性类型，min设置最小值，max设定最大值，step设定步长,当然啦。我们也可以手动直接输入。直接输入的数字不受所设定的最小值和最大值限制

创建日期选择器

   1: <li>

   2:     <label for="date_select">日期选择器</label>

   3:     <input type="date" name="start_date" id="date_select" value="2013-07-09">

   4: </li>

创建电子邮件输入框

   1: <li>

   2:     <label for="e_mail">负责人邮箱</label>

   3:     <input type="email" name="email" id="e_mail">

   4: </li>

创建URL输入框
 
   1: <li>

   2:     <label for="url">相关网址</label>

   3:     <input type="url" name="url" id="url">

   4: </li>

创建颜色选择器

   1: <li>

   2:     <label for="color_select">颜色选择器</label>

   3:     <input type="color" name="color_selcet" id="color_select">

   4: </li>

示例中的完整HTML代码如下：

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <title></title>
   5:      <meta charset="utf-8">
   6:   
   7:  </head>
   8:  <body>
   9:  <form method="post" action="index.html">
  10:      <fieldset id="personal_information">
  11:          <legend>Web表单控件</legend>
  12:          <ol>
  13:              <li>
  14:                  <label for="name">名称:</label>
  15:                  <input type="text" name="name" autofocus id="name">
  16:              </li>
  17:              <li>
  18:                  <input type="submit" value="提交">
  19:              </li>
  20:              <li>
  21:                  <label for="priority_range">调整优先级</label>
  22:                  <input type="range" min="0" max="100" name="priority" value="0" id="priority_range">
  23:              </li>
  24:              <li>
  25:                  <label for="adjust_number">调整数值</label>
  26:                  <input type="number" name="estimated_hours" min="0" max="100" id="adjust_number" step="10">
  27:              </li>
  28:                 <li>
  29:                     <label for="date_select">日期选择器</label>
  30:                     <input type="date" name="start_date" id="date_select" value="2013-07-09">
  31:                 </li>
  32:              <li>
  33:                  <label for="e_mail">负责人邮箱</label>
  34:                  <input type="email" name="email" id="e_mail">
  35:              </li>
  36:              <li>
  37:                  <label for="url">相关网址</label>
  38:                  <input type="url" name="url" id="url">
  39:              </li>
  40:              <li>
  41:                  <label for="color_select">颜色选择器</label>
  42:                  <input type="color" name="color_selcet" id="color_select">
  43:              </li>
  44:   
  45:          </ol>
  46:      </fieldset>
  47:   
  48:   
  49:   
  50:  </form>
  51:   
  52:  </body>
  53:  </html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

HTML_创建易用的Web表单的更多相关文章

  1. flask 利用flask_wtf扩展 创建web表单

    在Flask中,为了处理web表单,我们一般使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能 创建语句格式: startTime = DateTimeField('计划开 ...

  2. 使用Visual Studio 2013 从头构建Web表单

    在这篇文章中,我将采取VS 2013中特定的模板,也就是没有身份验证的Web表单模板,并说明如何构建这个项目从头开始.在本教程的最后,你会最终有一个模板,内容几乎是一样的使用Web表单模板没有认证(文 ...

  3. 读书笔记：《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

  4. 第三章：Web表单

    感谢作者 –> 原文链接 本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你 ...

  5. 怎样利用WordPress创建自己定义注冊表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  6. Flask 教程 第三章：Web表单

    本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你如何使用Web表单. 在第二章中 ...

  7. Flask开发系列之Web表单

    Flask开发系列之Web表单 简单示例 from flask import Flask, request, render_template app = Flask(__name__) @app.ro ...

  8. Flask学习之三 web表单

    本部分Miguel Grinberg教程的翻译地址:http://www.pythondoc.com/flask-mega-tutorial/webforms.html 开源中国的:http://ww ...

  9. ASP。NET Web表单模型，部分呈现和事件

    下载EventExample.zip - 41.33 KB 下载EventandAjaxExample.zip - 41.94 KB 介绍 通过参考ASP获得Web应用程序环境及其约束的概述.NET ...

随机推荐

  1. CorelDraw x6【Cdr x6】官方简体中文破解版（64位）安装图文教程、破解注册方法

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  2. cocos2dx 屏幕适配策略

    cocos2dx的常用函数: CCEGLView::sharedOpenGLView()->setDesignResolutionSize() //设计分辨率大小(即开发时为基准的屏幕分辨率) ...

  3. 关于 TIdHttp

    经验总结: 1.IdHttp 不支持多线程,只支持异步.所有网上的多线程写法下,如果同时并发多个长 GET 或 POST 请求时,会阻塞. 以下代码用于显示下载数据的进程. procedure TFo ...

  4. .NET连接SAP系统专题：SAP中新建可远程调用的RFC（二）

    何谓RFC,就是一个Function,可以被非SAP系统调用,比如VB,C#,Java等.如果我们在RFC中INCLUDE了相关的业务逻辑,那么我们就可以完全操控SAP中的业务数据了.就像在TTE里, ...

  5. C#反射深入学习

    C#反射 反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得 ...

  6. 一步步学Mybatis-搭建最简单的开发环境-开篇（1）

    最近抽空学习了Mybatis这个框架,在学习的过程中也找了很多的文章,个人感觉官网上的东西太多太杂,不适合许多希望一步步快速上手的朋友们,当然觉得查阅问题的时候可以直接通过官网找还比较快或者是Stac ...

  7. POJ 2309 BST 树状数组基本操作

    Description Consider an infinite full binary search tree (see the figure below), the numbers in the ...

  8. Cocos2d-x内存管理研究<二>

    http://hi.baidu.com/tzkt623/item/46a26805adf7e938a3332a04   上一篇我们讲了内核是如何将指针加入管理类进行管理.这次我将分析一下内核是如何自动 ...

  9. 管理和维护RHCS集群

    导读 管理和维护RHCS集群是一个非常复杂和繁琐的工作,要维护好一个RHCS集群,必须熟悉RHCS的基本运行原理,在集群管理方面,RHCS提供了两种方式:即Luci图形界面方式和命令行方式,这儿重点讲 ...

  10. webrtc学习(二): audio_device之opensles

    audio_device是webrtc的音频设备模块.  封装了各个平台的音频设备相关的代码 audio device 在android下封装了两套音频代码. 1. 通过jni调用java的media ...