CSS: wśród selektorów część 1.
23 października, 2024Jak już wcześniej wspomnieliśmy, selektor to inaczej element, lub grupa elementów, które wybieramy do definicji. Selektorami mogą być znaczniki języka...
Czytaj dalejHTML: formularze, cechy znaczników.
Formularze – typy wejść.
Znacznik <input> posiada wiele różnych wartości atrybutu type, od zwykłego typu tekstowego „text”, przez liczbowy, hasła, radio, checkbox, przycisk aż do zakresu i wyszukiwania.
Możemy zdefiniować listę rozwijaną za pośrednictwem znacznika <select>, wraz z jej opcjami zdefiniowanymi za pomocą znacznika <option> i grup opcji za pomocą znacznika <optgroup>.
Przykład wejść znacznika CSS w Comodo Dragon (Chrome):
td {
padding: 1px 5px;
text-align: right;
}
td:last-of-type {
text-align: left;
}
select {
margin: 5px 0 0 15px;
}Przykład wejść znacznika HTML w Comodo Dragon (Chrome) – plik forms.html:
<body>
<h1>Formularze</h1>
<form action="forms.html" method="post">
<fieldset>
<legend>Podstawowe typy wejść</legend>
<table>
<tr>
<td>Typ tekstowy:</td>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>Typ liczbowy:</td>
<td>
<input type="number" name="" value="">
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>Hasło:</td>
<td>
<input type="password" name="" value=""></td>
</tr>
<tr>
<td>Obszar tekstowy: </td>
<td>
<textarea name="name" rows="1" cols="21"></textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Typy wyboru</legend>
Pierwsza opcja alternatywy: <input type="checkbox" name="" value="1"><br>
Druga opcja alternatywy: <input type="checkbox" name="" value="2"><br><br>
Pierwsza opcja alternatywy rozłącznej: <input type="radio" name="test" value="1"><br>
Druga opcja alternatywy rozłącznej: <input type="radio" name="test" value="2"><br><br>
Wybór jednej opcji: <br>
<select name="" size="4">
<optgroup label="Grupa opcji">
<option value="1">Opcja</option>
<option value="2">Opcja</option>
</optgroup>
<optgroup label="Grupa opcji">
<option value="3">Opcja</option>
<option value="4">Opcja</option>
</optgroup>
</select><br><br>
Wybór kilku opcji: <br>
<select name="" multiple>
<optgroup label="Grupa opcji">
<option value="1">Opcja</option>
<option value="2">Opcja</option>
</optgroup>
<optgroup label="Grupa opcji">
<option value="3">Opcja</option>
<option value="4">Opcja</option>
</optgroup> </select> </fieldset>
<fieldset>
<legend>Przyciski</legend>
<input type="button" name="" value="przycisk (jakaś akcja)">
<input type="reset" name="" value="reset (czyść)">
<input type="submit" name="" value="submit (wyślij)">
</fieldset>
<fieldset>
<legend>Dodatkowe </legend>
<table>
<tr>
<td>Kolor:</td>
<td><input type="color" name="" value=""></td>
</tr>
<tr>
<td>Zakres:</td>
<td>
<input type="range" name="" min="0" max="100"></td>
</tr>
<tr>
<td>Wyszukiwanie:</td>
<td>
<input type="search" name="" value=""></td>
</tr>
<tr>
<td>Adres URL:</td>
<td>
<input type="url" name="" value="">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Data i czas (nieobsługiwane w Mozilla Firefox)</legend>
<table>
<tr>
<td>Godzina: </td>
<td>
<input type="time" name="" value="">
</td>
</tr>
<tr>
<td>Data: </td>
<td>
<input type="date" name="" value=""></td>
</tr>
<tr>
<td>Data i czas lokalny: </td>
<td>
<input type="datetime-local" name="" value=""></td>
</tr>
<tr>
<td>Miesiąc: </td>
<td>
<input type="month" name="" value="">
</td>
</tr>
<tr>
<td>Tydzień: </td>
<td>
<input type="week" name="" value=""></td>
</tr>
</table>
</fieldset>
</form>
</body>Formularze – inne cechy znaczników <input>, <form> i <disabled>
Część atrybutów formularzy odnosi się tylko do konkretnych elementów. Są to atrybuty znajdujące się w znacznikach <input> oraz <form>, inne są również nadawane znacznikom potomnym, w tym wypadku odnosi się to do <fieldset>.
Przykład dziedziczenia cech formularzy w Comodo Dragon (Chrome):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>Formularze</title>
<style media="screen">
form{border: 1px black solid;margin: 10px;padding: 10px;}</style>
</head>
<body>
<form action="formularze_atrybuty.html" method="post">
<fieldset disabled><legend>Fieldset 1</legend>
<input type="text" name="" value="value">
<input type="text" name="" value="value">
</fieldset>
<fieldset><legend>Fieldset 2</legend>
<input type="text" name="" value="value">
<input type="text" name="" value="value">
</fieldset>
</form>
<form action="formularze_atrybuty.html" method="post">
<fieldset><legend>Fieldset 1</legend>
<input type="text" name="" value="value" disabled>
<input type="text" name="" value="value">
</fieldset>
<fieldset><legend>Fieldset 2</legend>
<input type="text" name="" value="value">
<input type="text" name="" value="value">
</fieldset>
</form>
</body>
</html>
Formularze mogą przyjmować atrybuty związane z wyglądem danych komórek, czyli tym jaką szerokość będą miały, bądź tym co będą wyświetlały na początku. Mogą również przyjmować atrybuty związane z tym, co użytkownik może (bądź nie) zrobić z danym polem, lub co może (bądź nie) do niego wpisać. Również występują atrybuty odnoszące się do sposobu, w jaki są wysyłane pliki, bądź w jaki sposób jest realizowana sama wysyłka danych.
Przykładowe atrybuty znaczników w Comodo Dragon (Chrome):
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Formularze</title></head>
<body>
<form action="formularze_atrybuty.html" method="post" autocomplete="on">
<fieldset><legend>Wygląd</legend>
<input type="text" name="" value="value">
<input type="text" name="" placeholder="placeholder">
<input type="text" name="" value="size = 7" size="7">
</fieldset>
<fieldset><legend>Możliwości użytkownika</legend>
<input type="text" name="" value="disabled" disabled>
<input type="text" name="" value="readonly" readonly>
<input type="text" name="" value="required" required>
<input type="text" name="" value="autofocus" autofocus>
</fieldset>
<fieldset><legend>Ograniczenie typu zawartości</legend>
<input type="text" name="" value="Max lenght = 15" maxlength="15">
<input type="text" name="" value='pattern="[A-Za-z]{0,15}" - pole zawiera tylko litery, od 0 do 15 znaków' pattern="[A-Za-z{15}" size="55">
<input type="number" name="" value="0" min="-100" max="100" step="10">
</fieldset>
<fieldset><legend>Pliki i wysyłanie</legend> <input type="file" name="" value="" enctype="multipart/form-data" multiple>
<input type="submit" name="" value="Wyślij do nowego okna" formtarget="formularze_atrybuty.html"> <input type="submit" name="" value="Wyślij bez walidacji" formnovalidate>
</fieldset>
</form>
</body>
</html>
Podobne wpisy na blogu
Python: pętla for i while
21 kwietnia, 2024Wstęp Pętle to kluczowy element każdego języka programowania, i Python nie jest wyjątkiem. Pomimo skomplikowanego wyglądu, są one narzędziem ułatwiającym...
Czytaj dalejPython: Instrukcje warunkowe i operatory logiczne
7 marca, 2024Wstęp Instrukcje warunkowe są kluczowym narzędziem do kontrolowania przepływu programu w świecie programowania. W języku Python, pozwalają one programiście wykonać...
Czytaj dalej