<!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. jQuery 添加元素和删除元素

    jQuery - 添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元 ...

  2. getMeasuredHeight() 与 getHeight() 的区别

    http://www.cnblogs.com/x-dev/p/3767538.html?utm_source=tuicool&utm_medium=referral public final ...

  3. gulp插件

    gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使 ...

  4. 一个好用的PHP验证码类

    分享一个好用的php验证码类,包括调用示例. 说明: 如果不适用指定的字体,那么就用imagestring()函数,如果需要遇到指定的字体,就要用到imagettftext()函数.字体的位置在C盘下 ...

  5. 转：const“变量”、define的常量和static 变量

    首先讲C编译器的内存分配: 代码区 数据区 用户区=线程栈+堆 其中的数据区存储:常量(define)+静态变量(static)+符号集(const)+全局变量   然后讲一下编译的大致顺序: 注释- ...

  6. @RenderSection与@RenderBody

    _LayoutMain: <html> <head> @RenderSection("head") </head> <body> @ ...

  7. [C/C++] 各种C/C++编译器对UTF-8源码文件的兼容性测试（VC、GCC、BCB）

    在不同平台上开发C/C++程序时,为了避免源码文件乱码,得采用UTF-8编码来存储源码文件.但是很多编译器对UTF-8源码文件兼容性不佳,于是我做了一些测试,分析了最佳保存方案. 一.测试程序 为了测 ...

  8. oracle窗口函数中range interval的使用

    oracle窗口函数中range interval配合一般用来针对指定时间范围进行统计.其中range表示范围,between...and 表示之前的范围和之后的范围 , CURRENT ROW表示当 ...

  9. MVC中System.InvalidOperationException: 传入字典的模型项的类型为“XXX”，但此字典需要类型“XXA”的模型项

    出现此类错误的一个原因是Controller传过去的Model和View中的Model不是同一个Model

  10. linux内核源码注解

    轻松学习Linux操作系统内核源码的方法 针对好多Linux 爱好者对内核很有兴趣却无从下口,本文旨在介绍一种解读linux内核源码的入门方法,而不是解说linux复杂的内核机制:一．核心源程序的文件 ...