HTML, CSS ve JavaScript ile Contact Form Örneği
Bu yazımızda, HTML, CSS ve JavaScript ile basit bir contact form (İletişim Formu) örneği oluşturacağız.
Örnek uygulamamız, web sitelerinde görebileceğiniz örnek bir proje olacaktır. Bu örnek sayesinde şu konuları pekiştireceğiz:
- ☑️ HTML ile temel sayfa yapısını oluşturma
- ☑️ CSS ile sayfa stilini düzenleme
- ☑️ JavaScript ile sayfa üzerinde etkileşim sağlama
Kodun nasıl çalıştığını codepen üzerinden inceleyebilirsiniz:
See the Pen Contact Form by 1kodum (@1kodum) on CodePen.
⭐ HTML kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> </head> <body> <h3>Contact Form</h3> <div class="container"> <form action="/action_page.php" onsubmit="return validateForm()"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">Country</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> <option value="turkey">Türkiye</option> <option value="germany">Germany</option> <option value="england">England</option> </select> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea> <input type="submit" value="Submit"> </form> </div> <script src="script.js"></script> </body> </html> |
⭐ CSS kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
body { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; } input[type="text"], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type="submit"] { background-color: #4285f4; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; width: auto; /* İlk başta butonun genişliği otomatik olarak ayarlanır */ transition: width 0.9s; /* Buton genişliğindeki değişikliğin animasyon süresi */ } input[type="submit"]:hover { background-color: #28a745; /* width: 100%; Hover durumunda butonun genişliği form genişliğine büyür */ } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } |
⭐ JavaScript kodu
|
1 2 3 4 5 |
function validateForm() { // Burada form doğrulama işlemlerini gerçekleştirebilirsiniz. // Formu doğrulamak istemiyorsanız, bu fonksiyonu boş bırakabilirsiniz. return true; } |
