html5-表单

来源：互联网发布：淘宝兴奋饮料编辑：程序博客网时间：2024/06/06 13:05

例子：

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>

0 0