HTML5 经量级框架 jQuery Mobile Form 表单 - 7.7

Form 表单
HTML5文本框 

Slider

Toggle

HTML5
!DOCTYPE HTML>
html>
  head>
    meta name="viewport" content="width=device-width,inITial-scale=1" />
    meta http-equiv="Content-type" content="text/html; charset=utf-8">
    title> PhoneGap/title>

     
      link rel="stylesheet" href="jquery.mobile-1.3.1.css">
     
      script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"> /script>
      script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"> /script>
  /head>
  body>
    section>
      p> 普通文本框/p>
      p>
        input type="password" name="password" id="password" value="" />
      /p>
    /section>

    section>
      p> HTML5文本框/p>
      p>
        input type="seArch" name="search" id="search" value="" />
      /p>
    /section>

    section>
      p> Slider/p>
      p>
        input type="range" name="slider" id="range" value="2" min="0" max="10" />
      /p>
    /section>

    section>
      p> Toggle/p>
      p data-role="fieldcontain">
        section name="toggle" id="toggle" data-role="toggle">
          option value="off"> 关闭/option>
          option value="on"> 开启/option>
        /section>
      /p>
    /section>

  /body>
/html>

单选按钮

复选按钮

!DOCTYPE HTML>
html>
  head>
    meta name="viewport" content="width=device-width,initial-scale=1" />
    meta http-equiv="Content-type" content="text/html; charset=utf-8">
    title> PhoneGap/title>

     
      link rel="stylesheet" href="jquery.mobile-1.3.1.css">
     
      script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"> /script>
      script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"> /script>
  /head>
  body>
    fieldset data-role="controlgroup">
      legend> 选择年龄阶段/legend>
      input type="radio" name="radio-1" id="radio-1" value="any" checked="checked" />
      label for="radio-1"> 不限/label>
      input type="radio" name="radio-1" id="radio-2" value="16-22" />
      label for="radio-2"> 16-22岁/label>
      input type="radio" name="radio-1" id="radio-3" value="23-30" />
      label for="radio-3"> 23-30岁/label>
      input type="radio" name="radio-1" id="radio-4" value="31-40" />
      label for="radio-4"> 31-40岁/label>

    /fieldset>

    fieldset data-role="controlgroup">
      legend> 选择/legend>
      input type="checkbox" name="checkbox-1" id="checkbox-1" value="音乐" />
      label for="checkbox-4"> 音乐/label>
      input type="checkbox" name="checkbox-1" id="checkbox-2" value="电影" />
      label for="checkbox-4"> 电影/label>
    /fieldset>

    fieldset data-role="controlgroup" data-type="horizontal">
      legend> 选择微博选项/legend>
      input type="radio" name="radio-1" id="radio-1" value="any" checked="checked" />
      label for="radio-1"> 微博/label>
      input type="radio" name="radio-1" id="radio-2" value="粉丝" />
      label for="radio-2"> 粉丝/label>
      input type="radio" name="radio-1" id="radio-3" value="关注" />
      label for="radio-3"> 关注/label>
    /fieldset>
  /body>
/html>

禁止指定  disabled   option name="电影" disabled> 电影/option>

允许多选  multiple   select name="select" id="select" data-native-menu="true" multiple>

占位符   data-placeholder  option value="" data-placeholder="true"> 请选择/option>   

更多DATA  select name="select" id="select" data-native-menu="false" data-icon="gear" data-inline="true">   

HTML5
!DOCTYPE HTML>
html>
  head>
    meta name="viewport" content="width=device-width,initial-scale=1" />
    meta http-equiv="Content-type" content="text/html; charset=utf-8">
    title> PhoneGap/title>

     
      link rel="stylesheet" href="jquery.mobile-1.3.1.css">
     
      script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"> /script>
      script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"> /script>
  /head>
  body>
    p data-role="controlgroup">
      label for="select" class="select"> 选择兴趣/label>
      select name="select" id="select" data-native-menu="true" multiple>
        option value="" data-placeholder="true"> 请选择/option>
        optgroup label="娱乐类"/>
        option name="电影" disabled> 电影/option>
        option name="体育"> 体育/option>
        optgroup label="文体"/>
        option name="旅游"> 旅游/option>
      /select>

      label for="select" class="select" data-theme="b"> 操作/label>
      select name="select" id="select" data-native-menu="false" data-icon="gear" data-inline="true">
        option value="1"> 编辑用户/option>
        option value="2"> 删除用户/option>
      /select>
    /p>
     
  /body>
/html>

Form 表单
HTML5文本框 

Slider

Toggle

HTML5
!DOCTYPE HTML>
html>
  head>
    meta name="viewport" content="width=device-width,initial-scale=1" />
    meta http-equiv="Content-type" content="text/html; charset=utf-8">
    title> PhoneGap/title>

     
      link rel="stylesheet" href="jquery.mobile-1.3.1.css">
     
      script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"> /script>
      script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"> /script>
  /head>
  body>
    section>
      p> 普通文本框/p>
      p>
        input type="password" name="password" id="password" value="" />
      /p>
    /section>

    section>
      p> HTML5文本框/p>
      p>
        input type="search" name="search" id="search" value="" />
      /p>
    /section>

    section>
      p> Slider/p>
      p>
        input type="range" name="slider" id="range" value="2" min="0" max="10" />
      /p>
    /section>

    section>
      p> Toggle/p>
      p data-role="fieldcontain">
        section name="toggle" id="toggle" data-role="toggle">
          option value="off"> 关闭/option>
          option value="on"> 开启/option>
        /section>
      /p>
    /section>

  /body>
/html>

单选按钮

复选按钮

!DOCTYPE HTML>
html>
  head>
    meta name="viewport" content="width=device-width,initial-scale=1" />
    meta http-equiv="Content-type" content="text/html; charset=utf-8">
    title> PhoneGap/title>

     
      link rel="stylesheet" href="jquery.mobile-1.3.1.css">
     
      script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"> /script>
      script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"> /script>
  /head>
  body>
    fieldset data-role="controlgroup">
      legend> 选择年龄阶段/legend>
      input type="radio" name="radio-1" id="radio-1" value="any" checked="checked" />
      label for="radio-1"> 不限/label>
      input type="radio" name="radio-1" id="radio-2" value="16-22" />
      label for="radio-2"> 16-22岁/label>
      input type="radio" name="radio-1" id="radio-3" value="23-30" />
      label for="radio-3"> 23-30岁/label>
      input type="radio" name="radio-1" id="radio-4" value="31-40" />
      label for="radio-4"> 31-40岁/label>

    /fieldset>

    fieldset data-role="controlgroup">
      legend> 选择/legend>
      input type="checkbox" name="checkbox-1" id="checkbox-1" value="音乐" />
      label for="checkbox-4"> 音乐/label>
      input type="checkbox" name="checkbox-1" id="checkbox-2" value="电影" />
      label for="checkbox-4"> 电影/label>
    /fieldset>

    fieldset data-role="controlgroup" data-type="horizontal">
      legend> 选择微博选项/legend>
      input type="radio" name="radio-1" id="radio-1" value="any" checked="checked" />
      label for="radio-1"> 微博/label>
      input type="radio" name="radio-1" id="radio-2" value="粉丝" />
      label for="radio-2"> 粉丝/label>
      input type="radio" name="radio-1" id="radio-3" value="关注" />
      label for="radio-3"> 关注/label>
    /fieldset>
  /body>
/html>

禁止指定  disabled   option name="电影" disabled> 电影/option>

允许多选  multiple   select name="select" id="select" data-native-menu="true" multiple>

占位符   data-placeholder  option value="" data-placeholder="true"> 请选择/option>   

更多DATA  select name="select" id="select" data-native-menu="false" data-icon="gear" data-inline="true">   

HTML5
!DOCTYPE HTML>
html>
  head>
    meta name="viewport" content="width=device-width,initial-scale=1" />
    meta http-equiv="Content-type" content="text/html; charset=utf-8">
    title> PhoneGap/title>

     
      link rel="stylesheet" href="jquery.mobile-1.3.1.css">
     
      script type="text/javascript" charset="utf-8" src="jquery-1.9.0.min.js"> /script>
      script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.1.js"> /script>
  /head>
  body>
    p data-role="controlgroup">
      label for="select" class="select"> 选择兴趣/label>
      select name="select" id="select" data-native-menu="true" multiple>
        option value="" data-placeholder="true"> 请选择/option>
        optgroup label="娱乐类"/>
        option name="电影" disabled> 电影/option>
        option name="体育"> 体育/option>
        optgroup label="文体"/>
        option name="旅游"> 旅游/option>
      /select>

      label for="select" class="select" data-theme="b"> 操作/label>
      select name="select" id="select" data-native-menu="false" data-icon="gear" data-inline="true">
        option value="1"> 编辑用户/option>
        option value="2"> 删除用户/option>
      /select>
    /p>
     
  /body>
/html>

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！