CSS Formularze
Szerokość wszystkich pól <input>
<input type="text" name="nazwisko"> style.css: input { width: 30%; }
Szerokość dla pól typu password
<input type="password" name="haslo"> style.css: input[type=password]{ width: 80%; }
Marginesy dla pól typu email
<input type="email" name="email"> style.css: input[type=email]{ padding: 14px 20px; margin: 8px 0; }
Obramowanie dla pól typu url
<input type="URL" name="url"> style.css: input[type=url]{ border: 2px solid red; border-radius: 4px; }
Obramowanie dla pól typu number
<input type="number" name="number" max="100" min="50"> style.css: input[type=number]{ border: none; border-bottom: 2px solid red; }
Kolory dla pól typu date
<input type="date" name="date"> style.css: input[type=date]{ background-color: #3CBC8D; color: white; }
Formatowanie pól select
Pływanie
Piłka
Muzyka
Podróże
Kino
<select name="hobby2"> <option>Pływanie</option> <option>Piłka</option> <option>Muzyka</option> <option>Podróże</option> <option>Kino</option> </select> style.css: select { width: 100%; padding: 4px 20px; border: none; border-radius: 14px; background-color: #f1f1f1; }
Formatowanie pól textarea
Przykład...
<textarea>Przykład... </textarea> style.css: textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; resize: none; }
Grupowanie elementów formularza <fieldset>
Elementy zgrupowane:
<fieldset> <legend>Elementy zgrupowane:</legend> <br><br><input type="text" name="nazwisko"> <br><br><input type="date" name="date"> <br><br><input type="number" name="number"> </fieldset> style.css: fieldset { background-color:GhostWhite; } legend { background-color: BlueViolet; color: white; padding: 5px 10px; }
Formatowanie przycisków
<input type="submit" value="Wyślij"> style.css: input[type=submit], input[type=reset] { background-color: #4CAF50; color: white; cursor: pointer; }