表单标签小案例之学生档案效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form action="">
        <fieldset>

            <legend>学生档案:</legend>

                <label>姓名:<input type="text" placeholder="请输入学生名字"/></label> <br /> <br />
                <label>手机号码:<input type="tel" placeholder="请输入手机号码"/></label><br /><br />
                <label>邮箱:<input type="email" placeholder="请输入邮箱"/></label><br /><br />
                <label>院系:<input type="text" placeholder="请选择学院" list="xueyuan"/>
                <label><datalist id="xueyuan">
                    <option>信息工程学院</option>
                    <option>计算机学院</option>
                    <option>外国语学院</option>
                    <option>会计学院</option>
                </datalist></label>                <br /> <br /> 
                <label>出生日期:<input type="date" /></label><br /><br />
                <label>成绩:<input type="number" placeholder="请输入成绩"/></label><br /><br />
                <label>毕业时间:<input type="date" /></label> <br /> <br />
                <input type="submit" />　<input type="reset">
        </fieldset>
    </form>
</body>
</html>