-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathformbutton.html
More file actions
173 lines (172 loc) · 12.6 KB
/
Copy pathformbutton.html
File metadata and controls
173 lines (172 loc) · 12.6 KB
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Formularze HTML5</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://kit.fontawesome.com/45ba32cc64.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<header><h1>Formularze</h1></header>
<nav id="top-nav">
<ul>
<a href="index.html"><li>Początek z formularzem</li></a>
<a href="formbutton.html"><li>• Przyciski i elementy formularza</li></a>
<a href="attributes.html"><li>Pozostałe atrybuty</li></a>
</ul>
</nav>
<main>
<article>
<a name="pole_button"><h3>Pole BUTTON</h3></a>
<p>Pole <span class="text-red">BUTTON</span> służy do tworzenia w formularzu przycisków i jest definiowane za pomocą znacznika <span class="text-bold"><button></span>. Ma podobne działanie jak znacznik <span class="text-bold"><input></span>, który dla atrybutu <span class="text-red">type</span> przejmuje jedną z następujących wartości: <span class="text-red">button, reset</span> lub <span class="text-red">submit</span>.</p>
<div class="code">
<span>Kod HTML</span>
<button type="" name=""></button>
</div>
<div class="code">
<span>Kod HTML</span>
<button type="submit" name="obrazek"><br />
<pre> <img src="obrazek.jpg" alt="formularz" /></pre>
</button>
</div>
<p>Typy przycisków:</p>
<ul class="code-explain">
<li><span class="text-bold">type="submit"</span></li>
<li><span class="text-bold">type="reset"</span></li>
<li><span class="text-bold">type="button"</span></li>
</ul>
</article>
<article>
<a name="etykieta"><h3>Etykieta</h3></a>
<p>Opis pola, który wyświetla się na formularzu, nie jest związany z tym polem. Używając znacznika <span class="text-bold"><label></span>, można związać tekst etykiety z polem, którego dotyczy opis.</p>
<div class="code">
<span>Kod HTML</span>
<label><br />
<pre> <input type="checkbox" name="nazwa" value="wartość" /><br /> Etykieta pola</pre>
</label>
</div>
<p>lub</p>
<div class="code">
<span>Kod HTML</span>
<input type="checkbox" name="nazwa" value="wartość" id="pole" /><br />
<label for="pole">Etykieta pola</label>
</div>
</article>
<article>
<a name="grupowanie"><h3>Grupowanie elementów formularza</h3></a>
<p>Jeżeli projektowany formularz zawiera wiele powiązanych ze sobą elementów, można te elementy pogrupować za pomocą znacznika <span class="text-bold"><fieldset></span>. Powinien się on znaleźć za znacznikiem <span class="text-bold"><form></span>, ale przed znacznikami definiującymi poszczególne elementy. Stosując znacznik <span class="text-bold"><legend></span>, można dodać tytuł dla pogrupowanych elementów.</p>
<div class="code">
<span>Kod HTML</span>
<fieldset><br />
<pre> <legend>Tytuł</legend><br /> Definiowanie elementów grupy</pre>
</fieldset>
</div>
</article>
<article>
<a name="pole_select"><h3>Pole SELECT</h3></a>
<p>Pole <span class="text-red">SELECT</span> służy do wyświetlania w formularzu listy wartości i zachęca do wybrania jednej lub kilku z nich. Jest definiowany przy użyciu znacznika <span class="text-bold"><select></span> wewnątrz którego mogą wystąpić znaczniki <span class="text-bold"><option></span>. Znacznik <span class="text-bold"><select></span> definiuje listę, a poszczególne wartości tej listy są definiowane za pomocą znacznika <span class="text-bold"><option></span></p>
<p>Definicja listy jest następująca:</p>
<div class="code">
<span>Kod HTML</span>
<select name="lista"><br />
<pre> <option>Pierwszy element listy</option><br /> <option>Drugi element listy</option><br /> <option>Trzeci element listy</option></pre>
</select>
</div>
<p>Dla znacznika <span class="text-bold"><select></span> można użyć atrybutów:</p>
<ul class="code-explain">
<li><span class="text-bold">size="n"</span> - określa liczbę pozycji widocznych w polu SELECT. Jeżeli atrybut nie zostanie podany, to pole wyboru będzie działać z size="0" i użytkownik nie będzie mógł wybrać żadnej wartości z listy.</li>
<li><span class="text-bold">multiple</span> - można na liście zaznaczyć więcej niż jedną pozycję.</li>
</ul>
<p>Dla znacznika <span class="text-bold"><option></span> można użyć atrybutów:</p>
<ul class="code-explain">
<li><span class="text-bold">selected</span> - pozycja, dla której został zdefiniowany ten atrybut, będzie automatycznie zaznaczona na liście. Jeżeli atrybut ten nie zostanie użyty, domyślnie będzie zaznaczany pierwszy element na liście.</li>
<li><span class="text-bold">value="wartość"</span> - określa wartość danej pozycji przekazywaną przez wysyłany formularz.</li>
</ul>
</article>
<article>
<a name="listy_zagniezdzone"><h3>Listy zagnieżdżone</h3></a>
<p>Stosując znaczniki <span class="text-bold"><select></span> i <span class="text-bold"><option></span>, definiujemy listę wartości. Zdefiniowanej liście można nadać strukturę wielopoziomową, tworząc podmenu dla każdej wartości listy. Do tego służy znacznik <span class="text-bold"><optgroup></span> z atrybutem <span class="text-bold">label="tytuł grupy"</span>, gdzie <span class="text-red">tytuł grupy</span> to nazwa podmenu.</p>
<div class="code">
<span>Kod HTML</span>
<optgroup label="tytuł"><br />
<pre> <!-- lista wartości --></pre>
</optgroup>
</div>
<p>Dla każdego podmenu należy utworzyć przy użyciu znacznika <span class="text-bold"><option></span> oddzielną listę wartości i przed nim wstawić znacznik <span class="text-bold"><optgroup></span></p>
<a href="img/1.png" target="_blank">Zobacz przykład</a>
</article>
<article>
<a name="pole_textarea"><h3>Pole TEXTAREA</h3></a>
<p>Do wprowadzenia w formularzu większej ilości tekstu można użyć pola <span class="text-red">TEXTAREA</span>, które definiujemy za pomocą znacznika <span class="text-bold"><textarea></span>. Znacznik <span class="text-bold"><textarea></span> może zawierać następujące atrybuty:</p>
<div class="code">
<span>Kod HTML</span>
<textarea name="nazwa" rows="0" cols="0"></textarea>
</div>
<p>Tekst umieszczony pomiędzy znacznikami <span class="text-bold"><textarea></textarea></span> będzie wyświetlany jako wartość domyślna widoczna w polu bezpośrednio po wczytaniu zawartości strony do przeglądarki.</p>
<ul class="code-explain">
<li><span class="text-bold">name="nazwa"</span> - nazwa przypisana do pola.</li>
<li><span class="text-bold">rows="n"</span> - liczba wierszy w polu tekstowym.</li>
<li><span class="text-bold">cols="n"</span> - liczba kolumn (znaków) w polu tekstowym.</li>
</ul>
</article>
<article>
<a name="pole_nieaktywne"><h3>Nieaktywne pola formularza</h3></a>
<p>Cały formularz można uczynić nieaktywnym poprzez zdefiniownie atrybutu <span class="text-red">disabled</span>. Można również dodać atrybut <span class="text-red">disabled</span> do dowolnego elementu formularza, sprawiając, że tylko ten element stanie się nieaktywny. Najlepsze efekty daje związanie atrybutu <span class="text-red">disabled</span> ze znacznikiem <span class="text-bold"><input></span></p>
<div class="code">
<span>Kod HTML</span>
<input disabled name="nazwisko" value="Podaj nazwisko" size="25" />
</div>
<p>Inną metoda może być uniemożliwienie wprowadzania zmian w polu przez użytkownika. Do tego służy atrybut <span class="text-red">readonly</span>, którego użycie spowoduje zablokowanie pola.</p>
<div class="code">
<span>Kod HTML</span>
<input readonly name="nazwisko" value="Podaj nazwisko" size="25" />
</div>
<p>Atrybut <span class="text-red">readonly</span> może być używany dla pól tekstowych, pól haseł, pól wyboru i bloków tekstu.</p>
</article>
<article>
<a name="klawisze_skrotow"><h3>Klawisze skrótów</h3></a>
<p>Do zdefiniowanych w formularzu elementów można przypisywać <span class="text-red">klawisze skrótów</span>. Zastosowanie kombinacji klawiszy spowoduje przejście do wybranego elemetnu. Do definiowania klawiszy skrótów służy atrybut <span class="text-red">accesskey</span> umieszczony w definicji elementu, którego będzie dotyczył.</p>
<div class="code">
<span>Kod HTML</span>
<input type="radio" value="Podstawowe" name="grupa_opcji" accesskey="P" />Podstawowe [skrót ALT+P]<br /><br />
<input type="radio" value="Średnie" name="grupa_opcji" accesskey="S" />Podstawowe [skrót ALT+S]<br /><br />
<input type="radio" value="Wyższe" name="grupa_opcji" accesskey="W" />Podstawowe [skrót ALT+W]<br />
</div>
</article>
<article>
<a name="pole_datalist"><h3>Pole DATALIST</h3></a>
<p>Pole <span class="text-red">DATALIST</span> może służyć jako element autouzupełnienia wartości wprowadzonych w znaczniku <span class="text-bold"><input></span>. Za pomocą znacznika <span class="text-bold"><datalist></span> można zdefiniować predefiniowaną listę wartości. Po wybraniu pola tekstowego pojawi się lista rozwijana z wcześniej zdefiniowanymi wartościami.</p>
<p>Znacznik <span class="text-bold"><datalist></span> musi być poprzedzony znacznikiem <span class="text-bold"><input></span>. Wewnątrz znacznika <span class="text-bold"><datalist></span> muszą wystąpić znaczniki <span class="text-bold"><option></span>. Znacznik <span class="text-bold"><datalist></span> definiuję listę, a poszczególne wartości tej listy są definiowane za pomocą znacznika <span class="text-bold"><option></span>. Pełna definicja pola <span class="text-red">DATALIST</span> ma postać:</p>
<div class="code">
<span>Kod HTML</span>
<input list="nazwa lista" /><br />
<datalist id="nazwa listy">
<pre> <option value="wartość1"></option><br /> <option value="wartość2"></option><br /> <option value="wartość3"></option><br /></pre>
</datalist>
</div>
</article>
</main>
<aside>
<div id="right-nav-title">Spis treści</div>
<ul>
<a href="#pole_button"><li>Pole BUTTON</li></a>
<a href="#etykieta"><li>Etykieta</li></a>
<a href="#grupowanie"><li>Grupowanie elementów</li></a>
<a href="#pole_select"><li>Pole SELECT</li></a>
<a href="#listy_zagniezdzone"><li>Listy zagnieżdżone</li></a>
<a href="#pole_textarea"><li>Pole TEXTAREA</li></a>
<a href="#pole_nieaktywne"><li>Nieaktywne pola</li></a>
<a href="#klawisze_skrotow"><li>Klawisze skrótów</li></a>
<a href="#pole_datalist"><li>Pole DATALIST</li></a>
</ul>
</aside>
<div style="clear: both;"></div>
<footer>
<a href="https://github.com/robson04" target="_blank"><i class="fab fa-github"></i></a>
<br />
<p>© 2021 Robson04 - Wszelkie prawa zastrzeżone.</p>
</footer>
</div>
</body>
</html>