码迷，mamicode.com
首页 > Web开发 > 详细

jQuery Mobile_表单元素

时间：2015-12-31 12:12:56      阅读：421      评论：0      收藏：0      [点我收藏+]

标签：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header" style="text-align:center">header</div>
    <div data-role="content">
        <form method="post" action="#">
            <div data-role="fieldcontain">
            <label for="fname">姓名:</label>
            <input type="text" id="fname" name="fname" placeholder="姓名..." data-inline="true">
            <label for="birth">生日:</label>
            <input type="date" id="birth" name="birth" placeholder="生日..." data-inline="true">
            <label for="email">email:</label>
            <input type="email" id="email" name="email" placeholder="生日..." data-inline="true">
            <label for="introduce">简介:</label>
            <textarea id="introduce" placeholder="简介..."></textarea>
            <label for="search">search:</label>
            <input type="search" id="search" name="search" placeholder="搜索..." data-inline="true">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>请选择您的性别</legend>
                <label for="male">男</label>
                <input type="radio" name="sex" id="male" name="male">
                <label for="female">女</label>
                <input type="radio" name="sex" id="female" name="female">    
            </fieldset>
            <fieldset data-role="controlgroup">
                <legend>请选择您的性别</legend>
                <label for="male2">男</label>
                <input type="radio" name="sex2" id="male2" name="male2" checked>
                <label for="female2">女</label>
                <input type="radio" name="sex2" id="female2" name="female2">    
            </fieldset>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>请选择你看过的电影</legend>
                <label for="xunlongjue">寻龙诀</label>
                <input type="checkbox" name="movie" id="xunlongjue">
                <label for="dahuaxiyou">大话西游</label>
                <input type="checkbox" name="movie" id="dahuaxiyou">
                <label for="gongfu">功夫</label>
                <input type="checkbox" name="movie" id="gongfu">
            </fieldset>
            <fieldset data-role="controlgroup">
                <legend>请选择你看过的电影</legend>
                <label for="xunlongjue2">寻龙诀</label>
                <input type="checkbox" name="movie" id="xunlongjue2">
                <label for="dahuaxiyou2">大话西游</label>
                <input type="checkbox" name="movie2" id="dahuaxiyou2">
                <label for="gongfu2">功夫</label>
                <input type="checkbox" name="movie2" id="gongfu2">
            </fieldset>   
            <fieldset data-role="controlgroup">
                <legend for="day">选择天</legend>
                <select name="day" id="day" multiple="multiple" data-native-menu="false">
                    <optgroup label="工作日"></optgroup>
                    <option value="monday" selected>星期一</option>
                    <option value="tuesday">星期二</option>
                    <option value="wednsday">星期三</option>
                    <option value="thursday">星期四</option>
                    <option value="friday">星期五</option>
                    <optgroup label="周末"></optgroup>
                    <option value="saturday">星期六</option>
                    <option value="sunday">星期日</option>
                </select>
            </fieldset>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend >安排会议：</legend>
                <label for="day">选择天</label>
                <select name="day" id="day">
                    
                    <option value="monday" selected>星期一</option>
                    <option value="tuesday">星期二</option>
                    <option value="wednsday">星期三</option>
                    <option value="thursday">星期四</option>
                    <option value="friday">星期五</option>
                   
                    <option value="saturday">星期六</option>
                    <option value="sunday">星期日</option>
                </select>
                 <label for="time">选择时间</label>
                <select name="time" id="time">
                    
                    <option value="8" selected>8:00</option>
                    <option value="9">9:00</option>
                    <option value="10">10:00</option>
                    
                </select>
            </fieldset>
            <label for="points">滑块</label>
            <input type="range" id="points" name="points" value="50" min="0" max="100" data-highlight="true">
            <label for="switch">开关</label>
            <select name="switch" id="switch" data-role="slider">
                <option value="on" selected>on</option>
                <option value="off">off</option>
            </select>
            </div>
            <input type="submit" value="提交" data-inline="true">
        </form>
        
    </div>
    <div data-role="footer" style="text-align:center">footer</div>
    
</div>
</body>
</html>

jQuery Mobile_表单元素

标签：

原文地址：http://www.cnblogs.com/mmx-jiayou/p/5090865.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！