自主學習

自主學習:做了一個填單後可以收到訊息的網頁

程式碼1

<!DOCTYPE html>

<head>

<title>連結試算表 - 表單Form</title>

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"

rel="stylesheet" integrity="sha384-

KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"

crossorigin="anonymous">

<script

src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"

integrity="sha384-

U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"

crossorigin="anonymous">

</script>

<style>

.container-contact {

padding: 20px;

text-align: center;

color: white;

background-color: rgb(42, 165, 159);

width: 100%;

}

.container-contact h3 {

font-size: 30px;

text-align: center;

padding: 20px;

}

.btn {

width: 100%;

font-size: 20px;

margin: 20px 0px 20px 0px;

background-color: rgb(6, 117, 119);

color: rgb(255, 255, 255);

border-radius: 20px;

transition: 1s;

}

.btn:hover {

background-color: rgb(178, 224, 84);

color: black;

}

input {

margin-top: 10px;

}

</style>

</head>

<body>

<h3>跟我聯絡Contact Us</h3>

</div>

<input class="form-control" id="name" name="name"

placeholder="Name" type="text" required>

</div>

<input class="form-control" id="email" name="email"

placeholder="Email" type="email" required>

</div>

<br>

<textarea class="form-control" id="comments" name="comments"

placeholder="Comment" rows="5"></textarea>

<button class="btn " type="submit" id="submitButton">送出

Submit</button>

</div>

</form>

</div>

</div>

</script>

</body>

</html>

程式碼2

成果展示

Page updated

Report abuse