<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>第三个页面</title>

        <style>

            textarea:required{

                background-color: lightyellow;

            }

            body{

                font-family: "微软雅黑";

                max-width: :600px;

                padding: 0px 30px;

            }

            h1{

                margin-top: 0px;

            }

            p{

                margin-top: 0px;

            }

            fieldset{

                margin-bottom: 15px;

                padding: 10px;

            }

            legend{

                padding: 0px 3px;

                font-weight: bold;

                font-variant: small-caps;

            }

            label{

                width: 110px;

                display: inline-block;

                vertical-align: top;

                margin: 6px;

            }

            em{

                font-weight:bold ;

                font-style: normal;

                color: blue;

            }

            input:focus{

                background: #FFFFE0;

            }

            input,textarea{

                width: 250px;

            }

            textarea{

                height: 10;

            }

            input [type=checkbox]{

                width: 10px;

            }

            input [type=radio]{

                width: 10px;

            }

            input [type=submit]{

                width: 150px;

                padding: 10px;

            }

        </style>

        <script type="text/javascript" language="JavaScript">

            function validataCom(input){

                if(input.value.length < 20){

                    input.setCustomValidity("请您再输入一些信息");

                }else{

                    input.setCustomValidity("");

                }

            }

            function mySubmit()

            {

                alert("填写正确");

            }

        </script>

    </head>

    <body>

        <h1>个人信息</h1>

        <form action="#" onsubmit="mySubmit()" method="post">

            <p></p>

            <fieldset>

                <legend>Contact Details</legend>

                <label>姓名</label><em>*</em><!--显示文本不可编辑-->&nbsp;

                <input id="name" type="text" value="" placeholder="请输入姓名"

                    required="required" autofocus="autofocus" /><br/>

                <label>Tel&nbsp;&nbsp;</label>

                <input id="tel" type="tel"" value="" placeholder="请输入电话" /><br/>

                <label>邮箱&nbsp;</label>

                <input id="email" type="email" required="required" value="" placeholder="请输入邮件地址">

            </fieldset>

            <fieldset>

            <legend>Personal Information</legend>

            <label>生日&nbsp;&nbsp;</label>

            <input id="birthday" type="date" required="required" /><br/>

            <label>年龄&nbsp;&nbsp;</label>

            <input id="age" type="number" min="1" max="120" step="1" required="required" /><br/>

            <label>性别&nbsp;&nbsp;</label>

            <input id="rm" type="radio" name="gender" value="男"/>男

            <input id="rw" type="radio" name="gender" value="女"/>女

            <!--<select id="sex">

                <option>---请选择性别---</option>

                <option value="male">-------男-------</option>

                <option value="female">-------女-------</option>

            </select>-->

            <br/>

            <label>编辑</label><br/>

            <textarea id="conments" rows="8" cols="23" oninput="validataCom(this)" required="required" >

            </textarea>

            </fieldset>

            <fieldset>

                <legend>请输入您喜欢的动物</legend>

                <input id="c1" type="checkbox" /> 斑马

                <input id="c2" type="checkbox" /> 老虎

                <input id="c3" type="checkbox" /> 狮子

                <input id="c4" type="checkbox" /> 大象

            </fieldset>

            <p>

                <input type="submit" value="提交" />

            </p>

        </form>

    </body>

</html>

HTML5入门5---HTML5控件元素的更多相关文章

  1. HTML5入门八---缓存控件元素的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. CPF 入门教程 - 各个控件介绍（八）

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

  3. IOS版App的控件元素定位

    前言 Android版App的控件元素可以通过Android studio自带的工具uiautomatorviewer来协助定位! IOS版App的控件元素可以通过Appium来实现(未实现),或ap ...

  4. Webview页面的控件元素定位

    前言 现在有很多App都是Hybrid的,即有原生的页面又有Webview的页面,元素的可以通过uiautomatorviewer工具 进行控件元素的定位,Webview页面的则无法通过此方式定位,而 ...

  5. Android版App的控件元素定位

    前言 如何获取页面上各控件元素,无论是Web自动化还是App自动化,此步骤都是非常关键的! Web页面的控件元素可通过开发者选项(Chrome浏览器的F12)来协助定位,App端也是有相应的工具来协助 ...

  6. Python+Appium自动化测试(10)-TouchAction类与MultiAction类（控件元素的滑动、拖动，九宫格解锁，手势操作等）

    滑动屏幕方法swipe一般用于对页面进行上下左右滑动操作,但自动化过程中还会遇到其他情况,如对控件元素进行滑动.拖拽操作,九宫格解锁,手势操作,地图的放大与缩小等.这些需要针对控件元素的滑动操作,或者 ...

  7. HTML5 progress和meter控件

    在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...

  8. html5 新增表单控件和表单属性

    新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化         tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...

  9. html5新增表单控件和表单属性

    表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...

  10. WPF 入门《常用控件》

    1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"& ...

随机推荐

  1. 方法的可变长参数 传入参数个数不确定可用（Type ... values）

    /** * 可变长的参数. * 有时候,我们传入到方法的参数的个数是不固定的,为了解决这个问题,我们一般采用下面的方法: * 1． 重载,多重载几个方法,尽可能的满足参数的个数.显然这不是什么好办法. ...

  2. [大牛翻译系列]Hadoop（12）MapReduce 性能调优：诊断硬件性能瓶颈

    6.2.5 硬件性能问题 尽管单独的硬件的MTTF(平均失效前时间)都数以年记,然而在集群中就完全不是这么一回事了.整个集群的MTTF就要小得多.这一节要介绍如何确定CPU,内存,磁盘和网络是否过度利 ...

  3. 分享：PHP数组排序总结

    本文内容:PHP二维数组排序,PHP数组排序总结. php数组排序是PHP学习中最基础也是最重要的一部分. 1.常规数组的排序 常规数组是指数组各元素均为字符串或数字,这与这样的数组,我们可以采用so ...

  4. CLR via C# 混合线程同步构造

    1. 自旋,线程所有权和递归 2. 混合构造 a.ManualResetEventSlim b.SemaphoreSlim c.Monitor d.ReaderWriterLockSlim 3.条件变 ...

  5. C#生成随机字符串

    //<summary> ///得到随机字符. ///</summary> ///<param name="intLength">Length o ...

  6. ActiveMQ之MessageListener

    消息的消费者接收消息可以采用两种方式: 1.consumer.receive()或 consumer.receive(int timeout); 2.注册一个MessageListener. 采用第一 ...

  7. oracle11g RAC添加节点

    OS: [root@rac ~]# more /etc/oracle-releaseOracle Linux Server release 5.7 DB: SQL> SELECT * FROM ...

  8. 首页视频播放jquery

    <script type="text/javascript" src="[!--news.url--]skin/default/js/flowplayer-3.2. ...

  9. TCP/IP, HTTP, socket

    摘自:http://jingyan.baidu.com/article/08b6a591e07ecc14a80922f1.html http://goodcandle.cnblogs.com/arch ...

  10. UML中的六种关系的比较与学习

    通过不断的学习并绘制UML图,整个画图的过程中深刻体会到其核心部分还是理解事物之间的关系,总结六大关系来深入学习,主要关系有六种:继承.实现.依赖.关联.聚合.组合. 区别于联系:         1 ...