JavaScript 学习笔记
html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript">
window.onload = function(){
var submitButton = document.getElementById("submitButton");
submitButton.onclick = function(){
var inputNodesList = document.getElementsByTagName("input");
var inputName = inputNodesList.item(0).value;
var inputEmail = inputNodesList.item(1).value;
var inputSalary = inputNodesList.item(2).value;
}
}
</script>
</head>
<body>
<div id="firstDiv">
<div id="formDiv">
<div id="nameDiv" class="inputDiv">
<div class="mui-input-row">
<label>Name:</label>
<input type="text" placeholder="">
</div>
</div>
<div id="emailDiv" class="inputDiv">
<div class="mui-input-row">
<label>Email :</label>
<input type="text" placeholder="">
</div>
</div>
<div id="salaryDiv" class="inputDiv">
<div class="mui-input-row">
<label>Salary:</label>
<input type="text" placeholder="">
</div>
</div>
</div>
<input id="submitButton" type="button" name="Submit" id="submitButton" value="Submit" />
</div>
</body>
</html>
css 文件
* {
margin: 0;
border: 0;
}
#firstDiv {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: auto;
border: 10px aqua;
text-align: center;
border: 5px solid salmon;
}
.inputDiv {
display: flex;
border: 10px solid salmon;
margin: 1.875rem;
}
#submitButton {
margin: 30px 0.625rem;
font-size: inherit;
background-color: #00FFFF;
}
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
