Html CSS form Tek bir HTML dosyasında
Tek bir HTML dosyasında CSS ve form
Bu örnekte, CSS kodunu <style> etiketi içinde tanımlayarak formun stillerini belirtiyoruz. Form, .form-container
sınıfına sahip bir <div> içine yerleştirilir. .form-group sınıfı her form elemanı ve etiketi için kullanılır. İsim, e-
posta ve mesaj için <input> ve <textarea> elemanları kullanılır.
Form elemanlarına veri girişi yapılırken required özelliği kullanarak zorunlu alanlar belirlenir. Form gönderildiğinde
method="POST" ve action="" ile formun kendisine gönderilmesi sağlanır.
Bu örnekte, formun HTML kodu ve CSS stilleri tek bir HTML dosyasında birleştirilmiştir.
<!DOCTYPE html>
<html>
<head>
<title>Form Oluşturma</title>
<style>
/* CSS stilleri */
.form-container {
max-width: 400px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form-group textarea {
height: 100px;
}
.form-group input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.form-group input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Form Oluşturma</h2>
<form method="POST" action="">
<div class="form-group">
<label for="isim">İsim:</label>
<input type="text" id="isim" name="isim" required>
</div>
<div class="form-group">
<label for="email">E-posta:</label>
<input type="text" id="email" name="email" required>
</div>
<div class="form-group">
<label for="mesaj">Mesaj:</label>
<textarea id="mesaj" name="mesaj" required></textarea>
</div>
<div class="form-group">
<input type="submit" value="Gönder">
</div>
</form>
</div>
</body>
</html>
Yorumlar
Yorum Gönder