html5-表单

　　　　　　　<!-- 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">

　　　　　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>