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

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

  1. <fieldset>

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

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

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

  1.    4: </li>

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

创建滑块

  1.    1: <li>

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

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

  1.    4: </li>

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

创建数值设定框

  1.    1: <li>

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

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

  1.    4: </li>

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

创建日期选择器

  1.    1: <li>

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

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

  1.    4: </li>

创建电子邮件输入框

  1.    1: <li>

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

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

  1.    4: </li>

创建URL输入框
 
  1.    1: <li>

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

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

  1.    4: </li>

创建颜色选择器

  1.    1: <li>

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

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

  1.    4: </li>

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

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

    http://blog.163.com/modingfa_002/blog/static/11092546620133193264579 结构体的自引用(self reference),就是在结构体内 ...

  2. The source attachment does not contain the source for the file SignatureParser.class错误

    在myeclipse整合tomcat的完毕后,再启动tomcat的时候会出现这样的错误,呵呵,错误的大致意思是什么相关联错误,其实是myeclipse新加入的tomcat的模式出现错误了,myecli ...

  3. 使用Python脚本进行域名解析

    因为在研究爬虫,所以也了解了下域名解析.要提高爬虫的效率,就需要提高域名解析的效率.我将爬虫记录下的域名作为待解析的域名来测试各域名解析方法的效率.我尝试以下四种方法:1. 单线程依次解析各域名,2. ...

  4. Python 存储模型

    1.Python彻底分离了对象和引用,可以认为内存中的对象都是不可修改的,每次修改引用,相当于在堆上重新创建一个对象,引用指向新对象. 2.对于数值和字符串,修改意味着引用指向一个新对象. 3.集合中 ...

  5. iOS 7 Pushing the Limits Notes - create a layer like notification center's or control center's background

    Problem: How to create a layer that looks like your notification center's or control center's backgr ...

  6. dsPIC33EP 高速PWM模块初始化设置及应用

    //文件 p33pwm6.h #ifndef _P33PWM6_H_ #define _P33PWM6_H_ //#include "p33pwm6.h" #define FSYN ...

  7. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  8. Trie 树 及Java实现

    来源于英文“retrieval”.   Trie树就是字符树,其核心思想就是空间换时间. 举个简单的例子.   给你100000个长度不超过10的单词.对于每一个单词,我们要判断他出没出现过,如果出现 ...

  9. Action 和 Func

    C# 中的两个动态委托类型 也就是说我们不用在使用委托的时候就去声明一个委托对象,而是通过Action和Func就可以模拟出我们自己要用到的委托 区别: Action 表示没有返回值的委托  例如:A ...

  10. 读懂IL代码就这么简单

    原文地址:http://www.cnblogs.com/zery/p/3366175.html 一前言 感谢 @冰麟轻武 指出文章的错误之处,现已更正 对于IL代码没了解之前总感觉很神奇,初一看完全不 ...