html5-表单

例子:

text,number,email 的输入框

       <!-- required:必填项 -->
            <!-- autofocus:获得焦点 -->
            <!-- placeholder="请输入姓名" -->

            <label for="name">
                姓名:<input type="text" name="" id="name" required autofocus placeholder="请输入姓名">
            </label>
            <label class="lab">
                手机号:<input type="tel" name="" pattern="1\d{10}" required placeholder="请输入手机号">
            </label>
            <label>
                email:<input type="email" name="" placeholder="请输入email">
            </label>

下拉框自动填充:、

      <label>                        所属学院:<input type="text" name="" list="cla" placeholder="软件测试1503班">
                <datalist id="cla">
                    <option value="软件测试1501班"></option>
                    <option value="软件测试1501班"></option>
                    <option value="软件测试1501班"></option>
                    <option value="软件测试1504班"></option>
                </datalist>
            </label>

其他:

            <label>
                入学成绩:<input type="number" max="100" step="10" value="80" name="" id="score">
            </label>
            <label>
                基础水平:<meter min="0" max="100" low="60" high="80" id="level" value="80"></meter>
            </label>
            <label>
                入学时间:<input type="date" value="2016-09-01">
            </label>
            <label>
                毕业时间:<input type="date" value="2017-09-01">
            </label>
            <label>
                课程进度:<progress value="30" max="100" min="0"></picture>
            </label>
            <input type="submit" name="" value="提交" id="but">

html自定义字体:

     body{
            font-family: ‘myface‘, serif;
            font-size: 24px;
        }
        @font-face {
           font-family: ‘myface‘;
           src: url(‘./LANENAR_-webfont.ttf‘);
        } 

标题:

    <form action="">
        <fieldset>
            <legend>学生档案</legend>

        </fieldset>
    </form>
时间: 2024-08-06 10:20:35

html5-表单的相关文章

HTML5表单的创建及与PHP的交互

Html5表单 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title> </head> <body> <form>     用户名:     <input type="text">     <br/>

菜鸟零基础学习HTML5 &nbsp; ----- 1.5、HTML5表单和PHP环境搭建

一.HTML5表单 1.表单用于获取不同类型的用户输入 2.常用表单标签 例: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>表单</title> </head> <body>     <form>         用户名:         <i

服务器变量 超级全局数组$_SERVER (附加超简单表单与html5表单属性)

001.html <html> <head><title>user log</title> <meta http-equiv="content-type" content="text/html;charset:utf-8"> </head> <body> <form method="post" action="001.php"> 用

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html ? 待续.... 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

HTML5表单新增属性

------------------siwuxie095 HTML5 表单新增元素与属性 1.form 属性 在 HTML4 中,表单内的从属元素必须书写在表单内部,而 在 HTML5 中,可以把它们书写在页面上任何地方,然后为 该元素指定一个 form 属性,属性值为该表单的 id,这样就 可以声明该元素从属于指定表单了 2.formaction 属性 在 HTML4 中,一个表单内的所有元素只能通过表单的 action 属性被统一提交到另一个页面,而在 HTML5 中,可以为所有 的提交按钮

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

加速HTML5应用的九大方法-------1.使用HTML5表单和输入框

加速HTML5应用的九大方法-------1.使用HTML5表单和输入框HTML5 引入很多全新的表单属性和输入框类型,虽然并不是所有的浏览器都支持,但它们的确都很有用:autofocus 使得页面加载完毕后自动为某个输入框设置输入焦点placeholder 允许你为输入框设置默认文本,并在获取焦点时自动清除required 属性要求必须填写值后才能提交表单pattern 可以通过正则表达式指定输入框允许输入的内容因为这些功能都是内置的,无需使用 JavaScript 方法来实现,第一是节省开发

HTML5表单提交和PHP环境搭建

HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建

CSS3+HTML5表单

原文:CSS3+HTML5表单 源代码下载地址:http://www.zuidaima.com/share/1550463654644736.htm