Stilizarea Formularelor cu CSS
Formularele HTML pot arăta mult mai bine odată stilizate, iar CSS este instrumentul pentru asta.
Exemplu
În acest formular stilizat, câmpurile de text pentru prenume și nume stau deasupra unui dropdown pentru țară.
Prompt
Creați un formular HTML stilizat cu câmpuri pentru Prenume, Nume și un dropdown pentru Țară (Australia, Canada, USA). Stilizați câmpurile de text cu lățime completă, padding, margin și bordură. Stilizați în mod similar dropdown-ul select.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styled Form</title>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h2>CSS Forms</h2>
<div>
<form action="/action_page.php">
<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>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Stilizarea Câmpurilor de Input din Formulare
Majoritatea tipurilor de input acceptă stilizare CSS: câmpurile pentru text sau parole, casetele de bifare, butoanele radio și input-urile pentru fișiere. Poți stiliza și butoanele formularului și etichetele input-urilor.
Câmpurile de input își primesc de obicei aspectul de la width, padding și margin, de la border și border-radius și de la background-color, color și font-size.