HTML表单应用实例

06-30 12:57 717浏览

举报 T字号

大字

中字

小字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单案例</title>
    <link rel="stylesheet" href="../css/formcss.css">
</head>
<body>
 <form action="">
     <fieldset>
         <legend>学生档案</legend>
         <label for="userName">姓名：</label>
         <input type="text" name="userName" placeholder="请输入用户名" id="userName">
         <label for="userPhone">手机号码：</label>
         <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
         <label for="userEmail">邮箱地址：</label>
         <input type="email" name="userEmail" id="userEmail" required >
         <label for="col">所属学院：</label>
         <input type="text" id="col" list="School" placeholder="请选择">
         <datalist id="School">
             <option value="前端学院"></option>
             <option value="Java学院"></option>
             <option value="C++学院"></option>
             <option value="人工智能学院"></option>
         </datalist>
         <label for="score">入学成绩：</label>
         <input type="number" max="100" min="0" id="score">
         <label for="level">基础水平：</label>
          <meter id="level" value="0" max="100" min="0" low="59" high="90"></meter>
          <label for="inTime">入学日期：</label>
         <input type="date" id="inTime">
         <label for="leaveTime">毕业日期</label>
         <input type="date" id="leaveTime">
         <input type="submit">
     </fieldset>
 </form>
<script>
    document.getElementById("score").oninput = function () {
        document.getElementById("level").value=this.value;
    }
    document.getElementById("userPhone").oninvalid=function () {
        this.setCustomValidity("请输入11位手机号！")
    }
</script>
</body>
</html>

*{
    padding:0px;
    margin: 0px;
}
form{
    width: 300px;
    margin: 0px auto;
}
form >fieldset{
    padding:10px;
}
form > fieldset >meter,
form > fieldset >input{
    width:100%;
    height:30px ;
    line-height: 30px;
    margin:10px 0;
    border: none;
    border:1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-style: 16px;
}
form > fieldset >meter{
    padding:0px;
}

想了解更多关于HTML技术的相关技术，可以到动力节点在线免费下载相关学习资料哦!

0人推荐

共同学习，写下你的评论

0条评论

代码小兵279

75篇文章贡献270037字

HTML表单应用实例

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

HTML表单应用实例

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>