HTML 簡單表單模坂

Wt程序员

已于 2022-12-21 12:04:58 修改

阅读量206

点赞数

文章标签： html 前端 javascript css

于 2022-12-20 19:17:25 首次发布

本文链接：https://blog.csdn.net/m0_73538017/article/details/128389184

版权

Hi there,本文章想各位伙子，或是程序員評論一下這個文章，一起吐嘈一下。

模版連結如下：

https://raewaq.mimo.run/index.html

HTML段代码如下：

<!doctype html>
<html lang="en">
<head>
 <title>Form</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="form">
      <center>
         <br>
         <br>
         <br>
         <h1>Apply form</h1>
         <br>
         <label> Name: </label>
         <input type="text" id="name" placeholder="eg: Chan Tai Man">
         <br>
         <label> Age: </label>
         <input type="number" id="age">
         <br>
         <label> What your salary: </label>
         <select>
          <option> --choose your salary-- </option>
           <option> >$2000 </option>
           <option> large than$10000 </option>
           </select>
           <br>
           <button class="btn" onclick="submit()">Submit</button>
          </center>
   </div>
   







 <script src="script.js"></script>
 </body>
</html>

JavaScript 段：

function submit(){
   var name = document.getElementById("name").value;
   var age = document.getElementById("age").value;
   if (name=="" && age=="") {
      alert("Apply fail.");
   }
   else {
      alert("Apply sucess.");
   }
   
}

CSS 模版：

#form {
   border: solid 10px green;
   padding: 14px 15px;
   font-size: 16px;
}
.btn {
   background-color: #00FF00;
   color: white;
   padding: 20px 21px;
   font-size: 21px;
}