- ΠΠ΅ΡΡΡΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ°ΠΉΡΠ΅
- ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°? — html
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² HTML
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ».
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΡΠΈΡΡΠΊΠΈ ΡΠΎΡΠΌΡΒ».
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈΒ».
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³ button.
- ΠΠ½ΠΎΠΏΠΊΠΈ | Π£ΡΠ΅Π±Π½ΡΠ΅ ΠΊΡΡΡΡ | WebReference
- ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² html π© ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ°ΠΉΡΠ° π© ΠΠ΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
- ΠΠ½ΠΎΠΏΠΊΠΈ | WebReference
- ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ°?
ΠΠ΅ΡΡΡΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ°ΠΉΡΠ΅
ΠΡ Π·Π΄Π΅ΡΡ: ΠΠ»Π°Π²Π½Π°Ρ — HTML — HTML 5 — ΠΠ΅ΡΡΡΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ°ΠΉΡΠ΅
ΠΠ°ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅? Π― ΡΠ°Π·Π΄Π΅Π»ΠΈΠ»ΠΈ Π±Ρ ΠΈΡ Π½Π° Π΄Π²Π° Π²ΠΈΠ΄Π°: ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π½ΡΡΡΠΈ ΡΠΎΡΠΌΡ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΡΡΡΠ»ΠΊΠΈ. Π ΡΠ΅ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΌΠ΅ΡΡ Π²Π΅ΡΡΡΠ°ΡΡ.
ΠΠ½ΠΎΠΏΠΊΠΈ Π²Π½ΡΡΡΠΈ ΡΠΎΡΠΌΡ
Π’Π΅Π³ input
ΠΡΡΠ°Π²Π»ΡΡΡΡΡ ΡΠ΅Π³ΠΎΠΌ input, c ΡΠΈΠΏΠΎΠΌ submit β ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ.
<input type="submit" value="ΠΡΠΏΡΠ°Π²ΠΈΡΡ">
Π’Π΅Π³ button
ΠΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π° ΡΠ°ΠΉΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ°Π±ΠΎΡΠ°ΡΡΡΡ, Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΠ°ΠΉΡΠ°.
Π’Π΅Π³ button ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ input, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ (ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
ΠΠΎ Π½Π΅ Π½Π°Π΄ΠΎ Π·Π°Π±ΡΠ²Π°ΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Π΄Π°Π½Π½ΡΠ΅ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ, ΡΠΎ ΡΠ΅Π³ΠΈ input ΠΈ button, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π°
Π’Π΅Π³ΠΈ input ΠΈ button ΠΌΠΎΠ³ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΡΠΊΡΠΈΠΏΡΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈ ΡΠΎΠ±ΡΡΠΈΠΈ ΠΊΠ»ΠΈΠΊΠ°.
<button type="button">ΠΠ°ΠΆΠΌΠΈ ΠΌΠ΅Π½Ρ!</button>
ΠΡΠΈΠΌΠ΅Ρ Π²Π΅ΡΡΡΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π²Π½ΡΡΡΠΈ ΡΠΎΡΠΌΡ
Button
See the Pen CSS3 responsive form by porsake (@porsake) on CodePen.
Input
See the Pen Responsive Form by porsake (@porsake) on CodePen.
ΠΠ½ΠΎΠΏΠΊΠΈ-ΡΡΡΠ»ΠΊΠΈ
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅Π³Π° a, Π½ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΡΡΡΠ»ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅: ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π² ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅. ΠΠΎΡ ΡΠ°ΠΊΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π° Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠ΅Π³ΠΎΠΌ button, Π»ΡΡΡΠ΅ ΡΡΠ°Π·Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠ΅Π³ΠΎΠΌ a Ρ ΠΊΠ°ΠΊΠΈΠΌ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ ΠΈΠ»ΠΈ ID. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΊΡΠ΄Π°-ΡΠΎ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΡΡΡΠ»Π°ΡΡΡΡ.
<a href="#">Learn More</a>
ΠΡΠΈΠΌΠ΅Ρ Π²Π΅ΡΡΡΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΡΠ»ΠΊΠΈ #1
HTML
<a href="#">ΠΡΠΏΠΈΡΡ</a>
CSS
body {
Β Β background-color: #951a46; /* ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ */
Β Β font-family: Roboto, sans-serif; /* ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠ° */
}.button {
Β Β display: inline-block; /* ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΉ */
Β Β margin: 100px 400px; /* ΠΎΡΡΡΡΠΏΡ ΠΎΡ ΠΊΡΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° */
Β Β padding: 20px 60px; /* ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π΄ΠΎ ΠΊΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ */
Β Β background-color: #e44b9b; /* ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ */
Β Β box-shadow: 0px 6px #f7f8e8; /* Π·Π°Π΄Π°Π½Π° ΡΠ΅Π½Ρ */
Β Β border-radius: 5px; /* ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ² */
Β Β font-size: 27px; /* ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */
Β Β text-transform: uppercase; /* ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ Π² Π·Π°Π³Π»Π°Π²Π½ΡΠ΅ Π±ΡΠΊΠ²Ρ */
Β Β text-decoration: none; /* Π½Π΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΡ */
Β Β transition: 0.2s; /* ΠΏΠ»Π°Π²Π½ΡΠΉ Ρ
ΠΎΠ²Π΅Ρ ΡΡΡΠ΅ΠΊΡ */
Β Β color: #f7f8e8; /* ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ */
}.button:hover {
Β Β background-color: #949a9a; /* Π·Π°ΠΌΠ΅Π½Π° ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}
Π‘ΠΊΡΠΈΠ½ΡΠΎΡ
ΠΡΠΈΠΌΠ΅Ρ Π²Π΅ΡΡΡΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΡΠ»ΠΊΠΈ #2
HTML
<a href="#">Shop Now</a>
CSS
body {
Β Β background-color: #3cc395;
}.button {
Β Β display: inline-block;
Β Β margin: 100px 400px;
Β Β color: #fff;
Β Β font-family: BebasNeue;
Β Β font-size: 160%;
Β Β font-weight: bold;
Β Β text-transform: uppercase;
Β Β background-color: transparent;
Β Β border-radius: 13px;
Β Β border: 3px solid #fff;
Β Β padding: 6px 20px;
}
Π‘ΠΊΡΠΈΠ½ΡΠΎΡ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 24.04.2019 10:33:30
- ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ΡΡ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄ΡΡΠ·ΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅: http://vk.com/myrusakov.
ΠΡΠ»ΠΈ ΠΡ Ρ
ΠΎΡΠΈΡΠ΅ Π΄Π°ΡΡ ΠΎΡΠ΅Π½ΠΊΡ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅, ΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π΅Ρ Π² ΠΌΠΎΠ΅ΠΉ Π³ΡΡΠΏΠΏΠ΅: http://vk.com/rusakovmy.
ΠΡΠ»ΠΈ ΠΡ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅,
ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π»ΠΈΠ±ΠΎ Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²ΡΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠΉΡΠ΅ ΡΡΡ ΡΡΠ°ΡΡΡ Π΄ΡΡΠ·ΡΡΠΌ:
ΠΡΠ»ΠΈ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΠ°ΠΉΡ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π΅Π³ΠΎ (Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, Π½Π° ΡΠΎΡΡΠΌΠ΅, Π² ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅):
-
ΠΠ½ΠΎΠΏΠΊΠ°:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru//images/button.gif» alt=»ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ» /></a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ:
-
Π’Π΅ΠΊΡΡΠΎΠ²Π°Ρ ΡΡΡΠ»ΠΊΠ°:
<a href=»https://myrusakov.ru» target=»_blank»>ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ</a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ: ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ
- BB-ΠΊΠΎΠ΄ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΡΠΎΡΡΠΌΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Ρ Π² ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ):
[URL=»https://myrusakov.ru»]ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ[/URL]
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ HTML, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°? — html
ΠΠΎΡΠ΅ΠΌΡ Π±Ρ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ²ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Π½ΡΡΡΠΈ ΡΡΡΠ»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ
<a href="https://www.google.com/"><button>Next</button></a>
ΠΡΠΎ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΠΈ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΠ΅Π³ΠΎΠ² %20 ΠΊ ΡΡΡΠ»ΠΊΠ΅, ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΡΡΠΎΠ³ΠΎ Ρ ΠΎΡΠΈΡΠ΅. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡΡΠ»ΠΊΡ Π½Π° Google, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΡΡΠΎ Π² ΡΠ΅Π³ ΡΠΎΡΠΌΡ, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ.
ΠΡΠΈ ΡΠ²ΡΠ·ΡΠ²Π°Π½ΠΈΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² ΡΡ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΡΠ»ΠΊΠΈ. ΠΠ»ΠΈ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π°, Π΅ΡΠ»ΠΈ Π² Π½Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅.
<a href="myOtherFile"><button>Next</button></a>
ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² Π² ΠΊΠΎΠ½Π΅Ρ URL-Π°Π΄ΡΠ΅ΡΠ°, ΠΎΠ΄Π½Π°ΠΊΠΎ Π² Π½Π΅ΠΌ Π΅ΡΡΡ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ URL-Π°Π΄ΡΠ΅ΡΠ° Π΄ΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ ΠΈΠΌΠ΅Π½ΠΈ ΡΠ°ΠΉΠ»Π°. Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΠ»ΠΈ Π±Ρ ΠΌΠΎΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Π±ΡΠ»Π°…
.. ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΠ°ΠΏΠΊΡ — ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ°ΠΉΠ», Π° ΡΠ΅ΡΡΡΠ΅ | ΠΎΠ±ΠΎΠ·Π½Π°ΡΠΈΡΡ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΠΈΠ»ΠΈ ΡΠ°ΠΉΠ» Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅
..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html
ΠΡΠ»ΠΈ Ρ ΠΎΡΠΊΡΠΎΡ main.html, URL Π±ΡΠ΄Π΅Ρ
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°ΠΆΠ°Π» ΠΊΠ½ΠΎΠΏΠΊΡ Π²Π½ΡΡΡΠΈ main.html, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΡΠ°ΠΉΠ» second.html, URL-Π°Π΄ΡΠ΅Ρ
http://localhost:0000/public/html/secondary.html
ΠΠΈΠΊΠ°ΠΊΠΈΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² Π² ΠΊΠΎΠ½ΡΠ΅ URL Π½Π΅Ρ. ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ. ΠΡΡΠ°ΡΠΈ — ( %20 ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΡΠΎΠ±Π΅Π» Π² URL-Π°Π΄ΡΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΊΠΎΠ΄ΠΈΡΡΠ΅Ρ ΠΈ Π²ΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΎ Π½ΠΈΡ .)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: localhost: 0000, ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, Π½Π΅ Π±ΡΠ΄Π΅Ρ 0000, Ρ Π²Π°Ρ ΡΠ°ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ Π½ΠΎΠΌΠ΅Ρ ΠΏΠΎΡΡΠ°.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ,? _Ijt = xxxxxxxxxxxxxx Π² ΠΊΠΎΠ½ΡΠ΅ URL main.html, x ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π²Π°ΡΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΡΠΌ ΠΌΠΎΠ΅ΠΌΡ.
ΠΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ Ρ ΠΈΠ·Π»Π°Π³Π°Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ, Π½ΠΎ Ρ ΠΏΡΠΎΡΡΠΎ Ρ
ΠΎΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡΡΡΠ΅. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΡΠ΅Π½ΠΈΠ΅, ΠΈ Ρ Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΊΠΎΠΌΡ-ΡΠΎ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅. Π£Π΄Π°ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
qaru.site
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² HTML
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈΡΡ Ρ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠΎΡΠΌΡ textarea ΠΌΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΠΊ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠΌΡ β ΡΡΠΎ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΡΡ Π²ΠΈΠ΄ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠΎΡΠΌΡ:
1. ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ. ΠΡΠΎ ΡΠ°ΠΌΡΠΉ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΡΠΎΡΠΌΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·Π°Π½ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ action=«formdata.php» ΠΈ ΡΠΆΠ΅ Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΡ.
3. Π’ΡΠ΅ΡΠΈΠΉ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°. Π§Π°ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ ΡΠ°ΠΊΠΎΠ΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΈΠΏΠ° img — ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
4. Π§Π΅ΡΠ²Π΅ΡΡΡΠΉ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ°, Π² ΡΠ΅Π»ΠΎΠΌ, ΠΈ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠΎΡΠΌΠ°ΠΌ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π½Π΅ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΈ Π½Π΅ ΠΎΡΠΈΡΠ°Π΅Ρ ΡΠΎΡΠΌΡ, ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°. Π’Π°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π² ΡΠΎΡΠΌΠ΅. ΠΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π½Π° ΡΠ·ΡΠΊΠ΅ JavaScript
5. ΠΡΡΡΠΉ Π²ΠΈΠ΄ ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ, ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΡΠΎΡΠΌΡ action=«formdata.php», ΠΈ ΡΠΆΠ΅ Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΡ. ΠΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, ΡΡΠΎ ΡΠ°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³ΠΎΠ² <form> </form>
ΠΡΠ°ΠΊ, ΠΌΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ Π²ΡΠ΅ ΡΡΠΈ ΡΠ΅ΡΡΡΠ΅ Π²ΠΈΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΡΡΠΎ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΡΠΎΡΠΌΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ».
Π’Π°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <input> ΠΈ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° type ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ submit, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ submit, ΡΡΠΎ Π² ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ. Π’Π°ΠΊ ΠΆΠ΅ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΈΠΌΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅ΡΠ΅Π· ΡΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ name=«submit», Π½Ρ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ value=«ΠΡΠΏΡΠ°Π²ΠΈΡΡ». ΠΡΠ»ΠΈ Π²ΡΠ΅ ΡΡΠΎ ΡΠΎΠ±ΡΠ°ΡΡ Π² ΠΊΡΡΠΊΡ Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π²ΠΈΠ΄:
HTML
ΠΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΡΠ°ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠ°ΠΊ Π²ΡΡΠ΅ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΡΠΎΡΠΌΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ action=«formdata.php». Π ΠΌΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ Π²ΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΡΠΈΡΡΠΊΠΈ ΡΠΎΡΠΌΡΒ».
ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ ΠΏΠΎΠ»Π΅ΠΉ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ type, ΡΠΊΠ°Π·Π°Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ reset. ΠΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΠΌ, Π·Π°Π΄Π°Π΅ΠΌ ΠΈΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ name=«reset» ΠΈ ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ value=«ΠΡΠΈΡΡΠΈΡΡ». Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ:
HTML
Π’Π΅ΠΏΠ΅ΡΡ, ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²Π²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π² ΠΏΠΎΠ»Ρ ΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ Π² Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ ΡΠΎΡΠΌΡ Π±ΡΠ΄ΡΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈΒ».
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ Π² ΡΠΆΠ΅ ΡΠ°Π½Π΅Π΅ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ ΠΏΠ°ΠΏΠΊΡ images, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ Ρ ΡΠ°ΠΉΠ»ΠΎΠΌ index.html. Π‘ΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠ΅ ΡΠ°ΠΊΠΆΠ΅, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ ΡΠΎΠ³ΠΎ ΠΆΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° type, ΡΠΊΠ°Π·Π°Π² Π΅ΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ image, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π΅ ΡΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Β». Π’ΠΎΠ»ΡΠΊΠΎ, ΡΠ°Π· ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, Π³Π΄Π΅ ΠΎΠ½Π° Π»Π΅ΠΆΠΈΡ. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΡ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ src=«http://webteoretik.ru/images/batton.png». ΠΠ°Π΄Π°Π΄ΠΈΠΌ Π΅ΡΠ΅ ΠΈΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠ΅ name= «imageBatton» ΠΈ Π²ΠΎΡ ΠΈ Π²ΡΠ΅. Π’Π΅ΠΊΡΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ value Π½Π΅ Π½ΡΠΆΠ΅Π½, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠΆΠ΅ Π²ΡΠ΅ Π΅ΡΡΡ.
HTML
ΠΠ°ΠΆΠΈΠΌΠ°Ρ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ-ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ action=«formdata.php» Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΡΠΎΡΠΌΡ, ΡΠΎ Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΈΠΏΠ° submit. Π ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π’Π°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ, ΠΊΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΡΠ°Π½Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠ΅, ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ type=«button». ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΠΊΠΆΠ΅: ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΈΠΌΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ name=«button»; ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ value=«ΠΠ½ΠΎΠΏΠΊΠ°», Π½Π°Π΄ΠΏΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΡΠ°ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ. Π’Π°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΡΠΎΡΠΌΡ, ΡΠ°ΠΊ ΠΈ Π·Π° Π΅Π΅ ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ. Π’Π°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΠ·ΡΠΊΠ°ΠΌΠΈ JavaScript ΠΈ JQery.
HTML
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³ button.
Π’Π°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <button> </button>. ΠΠ΅ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ, ΠΊΠ°ΠΊ Π½Π° Π±Π°Π·Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠ°ΠΊ ΠΈ Π² ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅, ΡΠΊΠ°Π·Π°Π² ΡΠ΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ° ΡΠ°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊ ΡΠ°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ: ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π΄Ρ. Π’Π°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π²Π½ΡΡΡΠΈ <form> </form> ΡΠ°ΠΊ ΠΈ Π·Π° Π΅Π΅ ΠΏΡΠΈΠ΄Π΅Π»Π°ΠΌΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΡΠ°ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ, ΡΠΎ ΡΠ°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° <form> </form>.
HTML
ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ
ΠΠΎΡ Π² ΡΠ΅Π»ΠΎΠΌ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π²ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΎΠ±ΡΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ΠΠ΅ΡΠ²Π°Ρ HTML ΡΡΡΠ°Π½ΠΈΡΠ°</title> </head> <body>
Π’Π°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML. Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² ΠΠ΅ΠΌΠΎ. Π£ ΠΠ°Ρ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΠ»Π° ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΠΊΠ°ΡΡΠΈΠ½Π°. Π ΠΌΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΡΠΎΠΊΡ.
webteoretik.ru
ΠΠ½ΠΎΠΏΠΊΠΈ | Π£ΡΠ΅Π±Π½ΡΠ΅ ΠΊΡΡΡΡ | WebReference
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠΎΡΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π²Π²Π΅Π΄ΡΠ½Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² ΡΠΎΡΠΌΠ΅ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ.
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈΒ β Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <input> ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <button>.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²Π½Π°ΡΠ°Π»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅ΡΠ΅Π· <input> ΠΈ Π΅Π³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ.
<input type="button" value="Π’Π΅ΠΊΡΡ">
ΠΡΡΠΈΠ±ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π² ΡΠ°Π±Π».Β 1.
ΠΡΡΠΈΠ±ΡΡ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
name | ΠΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΡΠΌΡ ΠΌΠΎΠ³ Π΅Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ. |
disabled | ΠΠ»ΠΎΠΊΠΈΡΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π° Π½Π΅Ρ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ. |
form | ΠΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠΎΡΠΌΡ Π΄Π»Ρ ΡΠ²ΡΠ·ΡΠ²Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ <form>. |
type | ΠΠ»Ρ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ button. |
value | ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. |
autofocus | ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 1.
ΠΡΠΈΠΌΠ΅Ρ 1. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input type="button" value=" ΠΠ°ΠΆΠΌΠΈ ΠΌΠ΅Π½Ρ Π½Π΅ΠΆΠ½ΠΎ "></p>
</form>
</body>
</html>
ΠΡΠΈΠΌΠΈΡΠ΅ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ Π²ΡΠ΅ ΠΏΡΠΎΠ±Π΅Π»Ρ Π² Π½Π°Π΄ΠΏΠΈΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° HTML, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΈΡΠΎΠ³Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π΅Π΅, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π·Π°Π΄Π°Π²Π°ΡΡ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅ΡΠ΅Π· CSS. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 1.
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΅ΡΡΡ ΡΡΠ΄ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠ°Π²ΠΈΠ»:
- <input> Π½Π΅Π»ΡΠ·Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ Π²Π½ΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ <a>;
- <input> Π½Π΅Π»ΡΠ·Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ Π²Π½ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ <button>;
- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° value Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΡΡΡΠΌ.
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <button>. ΠΠ½ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <input>. ΠΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ° ΡΠΈΡ.Β 2 ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π½ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <button>.
Π ΠΈΡ. 2. ΠΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <button>
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
<button>ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
ΠΡΡΠΈΠ±ΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π² ΡΠ°Π±Π».Β 1, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ <input> Π°ΡΡΠΈΠ±ΡΡ value ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠ²Π΅ΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎ <img> Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΡ <button>, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 2.
ΠΡΠΈΠΌΠ΅Ρ 2. Π ΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><button>ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ</button>
<button>
<img src="image/umbrella.gif" alt="">
ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ
</button></p>
</form>
</body>
</html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠΈΡΡΠ½ΠΊΠ°. Π Π°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ <button>, Π½ΠΎ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΎΡΡΡΠΌ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π°, ΠΊΠ°ΠΊ Π² ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ <input>, ΡΠΈΡΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ ΡΠ΄Π°ΡΡΡΡ.
ΠΠ»Ρ <button> ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΡΡΠ΄ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ:
- <button> Π½Π΅Π»ΡΠ·Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ Π²Π½ΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ <a>;
- ΠΎΠ΄ΠΈΠ½ <button> Π½Π΅Π»ΡΠ·Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ Π²Π½ΡΡΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
ΠΠ½ΠΎΠΏΠΊΠ° Submit
ΠΠ»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Submit. ΠΡ Π²ΠΈΠ΄ Π½ΠΈΡΠ΅ΠΌ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½Π΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΡΠΎΡΠΌΡ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ action ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <form>. ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅, Π²Π²Π΅Π΄ΡΠ½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π² ΠΏΠΎΠ»ΡΡ ΡΠΎΡΠΌΡ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Ρ Π½ΠΈΠΌΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² Π²ΠΈΠ΄Π΅ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π§ΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π°Π²ΡΠΎΡΠ° ΡΠ°ΠΉΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ΄ΠΎΠ±Π½Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΎΠΏΡΠΎΡΠΎΠ², ΡΠΎΡΡΠΌΠΎΠ², ΡΠ΅ΡΡΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Submit Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <input> ΠΈΠ»ΠΈ <button>.
<input type="submit">
<button type="submit">ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
ΠΡΡΠΈΠ±ΡΡΡ ΡΠ΅ ΠΆΠ΅, ΡΡΠΎ ΠΈ Ρ ΡΡΠ΄ΠΎΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΠΏΡΠΈΠΌΠ΅ΡΒ 3), Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° value ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ΄ΡΡΠ°Π²ΠΈΡ ΡΠ΅ΠΊΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΠ½ ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π’Π°ΠΊ, Firefox ΠΏΠΈΡΠ΅Ρ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π·Π°ΠΏΡΠΎΡΒ», IE β Β«ΠΠΎΠ΄Π°ΡΠ° Π·Π°ΠΏΡΠΎΡΠ°Β», Opera ΠΈ ChromeΒ β Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ». Π‘Π°ΠΌ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ΠΏΠΈΡΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ.
ΠΡΠΈΠΌΠ΅Ρ 3. ΠΡΠΏΡΠ°Π²ΠΊΠ° Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input name="login"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
ΠΠ½ΠΎΠΏΠΊΠ° Reset
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Reset Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡΠΌΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ Π²Π²Π΅Π΄ΡΠ½Π½ΠΎΠΉ Π² ΠΏΠΎΠ»ΡΡ ΡΠΎΡΠΌΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΎΡΠΌ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Reset Π»ΡΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎ ΠΎΡΠΈΠ±ΠΊΠ΅ Π½Π° Π½Π΅Ρ Π½Π΅ Π½Π°ΠΆΠ°ΡΡ, Π²Π΅Π΄Ρ ΡΠΎΠ³Π΄Π° ΠΏΡΠΈΠ΄ΡΡΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΡΠΌΡ Π·Π°Π½ΠΎΠ²ΠΎ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΎΡΡ ΠΈ ΠΏΠΎΡ ΠΎΠΆ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
<input type="reset">
<button type="reset">ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 4 ΠΏΠΎΠΊΠ°Π·Π°Π½Π° ΡΠΎΡΠΌΠ° Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΠΏΠΎΠ»Π΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π²Π΅Π΄ΡΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° value ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <input>. ΠΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΈΡΡΠΈΡΡΒ», Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΈ Π² Π½ΡΠΌ ΡΠ½ΠΎΠ²Π° ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π°Π΄ΠΏΠΈΡΡ Β«ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡΒ».
ΠΡΠΈΠΌΠ΅Ρ 4. ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ ΡΠΎΡΠΌΡ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input value="ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ"></p>
<p><input type="submit">
<input type="reset"></p>
</form>
</body>
</html>
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Reset Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ. ΠΡΠ»ΠΈ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΠΏΡΡΡΠΈΡΡ, ΠΈΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π½Π΅ Π·Π°Π΄Π°Π²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ value, Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΡΠ΅ΠΊΡΡ Β«Π‘Π±ΡΠΎΡΠΈΡΡΒ».
ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ Π·Π°Π΄Π°Π½ΠΈΡΠΌ
webref.ru
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² html π© ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ°ΠΉΡΠ° π© ΠΠ΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΠ²ΡΠΎΡ ΠΠ°ΠΊΠΡΠΎΡΡΠΎ!
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² HTML ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ΅Π³ΠΎΠ² <input> ΠΈ <button>. ΠΠ½ΠΈ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠΊΡΠΈΠΏΡΡ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΠΈΠ»ΠΈ ΠΎΡΠΈΡΠ°ΡΡ ΡΠΆΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠ΅ ΡΠΎΡΠΌΡ.
Π‘ΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅:
ΠΠ½ΡΡΡΡΠΊΡΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠ° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ name ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ value. ΠΡΡΠΈΠ±ΡΡ name Π·Π°Π΄Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΡΠΎΡΠΌΡ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. Value Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ²Π΅ΡΡ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΏΠΈΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:<form>
<input type = βbuttonβ name = βΠΈΠΌΡβ value = βΠΡΠΏΡΠ°Π²ΠΊΠ°β>
</form>
ΠΠ°Π½Π½Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ button ΠΈ Π½Π°Π΄ΠΏΠΈΡΡΡ Β«ΠΡΠΏΡΠ°Π²ΠΊΠ°Β» Π½Π° Π½Π΅ΠΉ.
ΠΠ΅ΡΠΊΡΠΈΠΏΡΠΎΡ ΡΠΎΠ·Π΄Π°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ. Π’Π°ΠΊ, ΠΏΠΎΠ²Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π»ΠΎΠΆΠΈΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:<button form = βid ΡΠΎΡΠΌΡβ formaction = βΠ°Π΄ΡΠ΅Ρβ formmethod = βΠΌΠ΅ΡΠΎΠ΄ ΠΏΠ΅ΡΠ΅ΡΡΠ»ΠΊΠΈ Π΄Π°Π½Π½ΡΡ β name = βΠΈΠΌΡβ type = βΡΠΈΠΏβ value = βΠ·Π½Π°ΡΠ΅Π½ΠΈΠ΅β><img src = βΠΏΡΡΡ Π΄ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡβ><b>Π’Π΅ΠΊΡΡ</b></button>
ΠΡΡΠΈΠ±ΡΡ form Π·Π°Π΄Π°Π΅Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠΎΡΠΌΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π΄Π°Π½Π½ΡΡ . Formaction ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΡΠΌΡ Π² Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π΄ΡΡΠ³ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ ΠΈΠ»ΠΈ ΡΠ°ΠΉΡΠ΅. Formmethod ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠ΅ΡΠ΅ΡΡΠ»ΠΊΠΈ Π΄Π°Π½Π½ΡΡ . Name Π·Π°Π΄Π°Π΅Ρ ΠΈΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠ΅, type β ΡΠΈΠΏ (ΠΎΠ±ΡΡΠ½Π°Ρ, Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ ΡΠΎΡΠΌΡ). Value β Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΊΡΠΈΠΏΡΠ°ΠΌΠΈ. ΠΠ° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π°Π΄ΡΠ΅ΡΠΎΠΌ ΠΈ ΠΆΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ. Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π²Π²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠΈΠΏ:<input type = βsubmitβ>
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΈΡΠ°ΡΡΡΡ Π²Π²Π΅Π΄Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π΄Π°Π½Π½ΡΠ΅, Π·Π°Π΄Π°ΠΉΡΠ΅ type = βresetβ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅
ΠΠ΅ΡΠΊΡΠΈΠΏΡΠΎΡ <input> Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ΅Π³Π° <form>. ΠΠ½ΠΎΠΏΠΊΠ° <button> ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π° ΠΈ Π²Π½Π΅ ΡΠΎΡΠΌΡ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΎΠ½Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ΅Π½Π° ΠΌΠ΅ΠΆΠ΄Ρ <form></form>.
Π‘ΠΎΠ²Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π΅Π½?
Π‘ΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅:
www.kakprosto.ru
ΠΠ½ΠΎΠΏΠΊΠΈ | WebReference
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΠΎΠ½ΡΡΠ½ΡΡ ΠΈ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΠΎ ΠΈΡ Π²ΠΈΠ΄Ρ ΡΡΠ°Π·Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΒ β ΡΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ Π½Π° Π½ΠΈΡ . ΠΠ° ΡΡΡΡ ΡΡΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π² ΡΠΎΡΠΌΠ°Ρ , ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΈ ΠΈΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠ΅ ΠΈ ΠΎΡΠΈΡΡΠΊΠ΅.
ΠΠ½ΠΎΠΏΠΊΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈΒ β Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <input> ΠΈΠ»ΠΈ <button>.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²Π½Π°ΡΠ°Π»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅ΡΠ΅Π· <input> ΠΈ Π΅Π³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ.
<input type="button" Π°ΡΡΠΈΠ±ΡΡΡ>
ΠΡΡΠΈΠ±ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π² ΡΠ°Π±Π».Β 1.
ΠΡΡΠΈΠ±ΡΡ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
name | ΠΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ; ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΡΠΌΡ ΠΌΠΎΠ³ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ. |
value | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° Π½Π΅ΠΉ. |
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 1.
ΠΡΠΈΠΌΠ΅Ρ 1. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input type="button" value=" ΠΠ°ΠΆΠΌΠΈ ΠΌΠ΅Π½Ρ Π½Π΅ΠΆΠ½ΠΎ "></p>
</form>
</body>
</html>
ΠΡΠΎΠ±Π΅Π»Ρ Π² Π½Π°Π΄ΠΏΠΈΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π² HTML, ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΈΡΠΎΠ³Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 1.
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <button>. ΠΠ½ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <input>. ΠΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ° ΡΠΈΡ.Β 2 ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π½ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <button>.
Π ΠΈΡ. 2. ΠΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <button>
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
<button Π°ΡΡΠΈΠ±ΡΡΡ>ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
ΠΡΡΠΈΠ±ΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π² ΡΠ°Π±Π».Β 1, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ <input> Π°ΡΡΠΈΠ±ΡΡ value ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠ²Π΅ΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <img> Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΡ <button>, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 2.
ΠΡΠΈΠΌΠ΅Ρ 2. Π ΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><button>ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ</button>
<button>
<img src="image/umbrella.gif" alt="">
ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ
</button></p>
</form>
</body>
</html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠΈΡΡΠ½ΠΊΠ°. Π Π°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° <button>, Π½ΠΎ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΎΡΡΡΠΌ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π°, ΠΊΠ°ΠΊ Π² ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ <input>, ΡΠΈΡΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ ΡΠ΄Π°ΡΡΡΡ.
ΠΠ½ΠΎΠΏΠΊΠ° Submit
ΠΠ»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Submit. ΠΡ Π²ΠΈΠ΄ Π½ΠΈΡΠ΅ΠΌ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ action ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <form>. ΠΡΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠ°Ρ Π΅ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΡΠΎΡΠΌΡ, ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅ Π²Π²Π΅Π΄ΡΠ½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π² ΠΏΠΎΠ»ΡΡ ΡΠΎΡΠΌΡ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Ρ Π½ΠΈΠΌΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² Π²ΠΈΠ΄Π΅ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π§ΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π°Π²ΡΠΎΡΠ° ΡΠ°ΠΉΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ΄ΠΎΠ±Π½Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΎΠΏΡΠΎΡΠΎΠ², ΡΠΎΡΡΠΌΠΎΠ², ΡΠ΅ΡΡΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Submit Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <input> ΠΈΠ»ΠΈ <button>.
<input type="submit" Π°ΡΡΠΈΠ±ΡΡΡ>
<button type="submit">ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
ΠΡΡΠΈΠ±ΡΡΡ ΡΠ΅ ΠΆΠ΅, ΡΡΠΎ ΠΈ Ρ ΡΡΠ΄ΠΎΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΠΏΡΠΈΠΌΠ΅ΡΒ 3).
ΠΡΠΈΠΌΠ΅Ρ 3. ΠΡΠΏΡΠ°Π²ΠΊΠ° Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input name="login"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
ΠΡΡΠΈΠ±ΡΡ name Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΠΏΠΈΡΠ°ΡΡ. ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ value, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ ΡΠ΅ΠΊΡΡ, ΠΎΠ½ ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π’Π°ΠΊ, Firefox ΠΏΠΈΡΠ΅Ρ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π·Π°ΠΏΡΠΎΡΒ», IE β Β«ΠΠΎΠ΄Π°ΡΠ° Π·Π°ΠΏΡΠΎΡΠ°Β», Opera ΠΈ ChromeΒ β Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ». Π‘Π°ΠΌ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ΠΏΠΈΡΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ.
ΠΠ½ΠΎΠΏΠΊΠ° Reset
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Reset Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡΠΌΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ Π² ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ Π²Π²Π΅Π΄ΡΠ½Π½ΠΎΠΉ Π² ΠΏΠΎΠ»ΡΡ ΡΠΎΡΠΌΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΎΡΠΌ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Reset Π»ΡΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎ ΠΎΡΠΈΠ±ΠΊΠ΅ Π½Π° Π½Π΅Ρ Π½Π΅ Π½Π°ΠΆΠ°ΡΡ, Π²Π΅Π΄Ρ ΡΠΎΠ³Π΄Π° ΠΏΡΠΈΠ΄ΡΡΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΡΠΌΡ Π·Π°Π½ΠΎΠ²ΠΎ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΎΡΡ ΠΈ ΠΏΠΎΡ ΠΎΠΆ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
<input type="reset" Π°ΡΡΠΈΠ±ΡΡΡ>
<button type="reset">ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 4 ΠΏΠΎΠΊΠ°Π·Π°Π½Π° ΡΠΎΡΠΌΠ° Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΠΏΠΎΠ»Π΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π²Π΅Π΄ΡΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° value ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <input>. ΠΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΈΡΡΠΈΡΡΒ», Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΈ Π² Π½ΡΠΌ ΡΠ½ΠΎΠ²Π° ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π°Π΄ΠΏΠΈΡΡ Β«ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡΒ».
ΠΡΠΈΠΌΠ΅Ρ 4. ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ ΡΠΎΡΠΌΡ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input value="ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ"></p>
<p><input type="submit" value="ΠΡΠΏΡΠ°Π²ΠΈΡΡ">
<input type="reset" value="ΠΡΠΈΡΡΠΈΡΡ"></p>
</form>
</body>
</html>
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Reset Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ. ΠΡΠ»ΠΈ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π΅ ΠΏΠΈΡΠ°ΡΡ, ΠΈΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π½Π΅ Π·Π°Π΄Π°Π²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ value, Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΡΠ΅ΠΊΡΡ Β«ΠΡΠΈΡΡΠΈΡΡΒ».
Π¦Π²Π΅ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΈΠ΄ ΠΈ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π²ΡΠΈΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 5. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ. ΠΠΎΠΌΠ½ΠΈΡΠ΅ ΠΏΡΠΎ ΠΎΠ΄Π½Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΒ β ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΈΠΏΠΎΠ΄Π½ΡΡΠΎΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ Β«ΠΏΠ»ΠΎΡΠΊΠΈΡ Β» ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π°Π΄ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅ΡΡ ΡΠ°ΠΌΠΊΡ, ΠΏΡΡΡΡ Π΄Π°ΠΆΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΡ.
ΠΡΠΈΠΌΠ΅Ρ 5. ΠΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΎΠΊ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
<style>
.btn {
background: #5d8f76; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
color: #fff; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
padding: 7px 12px; /* ΠΠΎΠ»Ρ */
margin-bottom: 1em; /* ΠΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ */
}
.btn:hover {
background: #1e6550; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° */
}
.btn-flat {
border: 1px transparent; /* ΠΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° */
}
.btn-round {
border-radius: 20px; /* Π Π°Π΄ΠΈΡΡ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ */
}
</style>
</head>
<body>
<form>
<p><input type="button" value="ΠΡΡ
ΠΎΠ΄Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°">
<input type="button" value="Π¦Π²Π΅ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°">
<input type="button" value="ΠΠ»ΠΎΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°">
<input type="button" value="ΠΠ½ΠΎΠΏΠΊΠ° ΡΠΎ ΡΠΊΡΡΠ³Π»ΡΠ½Π½ΡΠΌΠΈ ΡΠ³ΠΎΠ»ΠΊΠ°ΠΌΠΈ"></p>
</form>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 3.
Π ΠΈΡ. 3. ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 11.08.2018
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
webref.ru
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ°?
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
ΠΠ°Π΄Π°ΡΠ°
Π Π°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ Π²Π½ΡΡΡΠΈ ΡΠ°ΠΌΠΊΠΈ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΡΠ΅ΠΊΡΡΠ°.
Π Π΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ°Π΄ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ Π½Π°ΠΏΡΡΠΌΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Π½ΡΡΡΡ ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ Π½Π΅Π»ΡΠ·Ρ. ΠΠΎΡΡΠΎΠΌΡ Π»ΡΠ±ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Π»ΠΈΡΡ ΠΈΠΌΠΈΡΠΈΡΡΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ. ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ»Π»ΡΠ·ΠΈΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ±ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΌΠΊΡ Π²ΠΎΠΊΡΡΠ³ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΏΠΎΠ»Π΅ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΠ°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠΎΠ³Π΄Π° Π²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Ρ Π½Π°Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 1 ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠΎΡΠΌΡ Π·Π°Π΄Π°Π½Π° ΠΊΠ°ΠΊ 300 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 274 ΠΏΠΈΠΊΡΠ΅Π»Π°, Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Β β 20 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ². Π¨ΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»Ρ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π½Π° Ρ ΡΡΡΡΠΎΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΎ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΎΠ² Π² ΡΠΎΡΠΌΠ΅, ΡΡΠΎ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎ ΡΠΊΠ°ΠΆΠ΅ΡΡΡ Π½Π° ΠΎΠ±ΡΠ΅ΠΌ Π²ΠΈΠ΄Π΅.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ΄ CSS ΠΏΠΎΡΡΠ΅Π±ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Safari ΠΈ Chrome. ΠΡΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠΈ ΡΠΎΠΊΡΡΠ° ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΡΡ ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π·ΡΡΡΠ°Π΅Ρ Π½Π°ΡΡ ΠΈΠ»Π»ΡΠ·ΠΈΡ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ. Π§ΡΠΎΠ±Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΎ, Π² ΡΡΠΈΠ»Π΅ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ outline ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ none, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΌΠΊΠΈ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎΠΊΡΡΠ³ ΠΏΠΎΠ»Ρ ΠΏΠΎΠΈΡΠΊΠ° (<input type=»search»>) Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΠΎΠ½ΠΊΠ°Ρ ΡΠ°ΠΌΠΊΠ°, Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° -webkit-appearance ΠΎΠΏΡΡΡ ΠΆΠ΅ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ none.
ΠΡΠΈΠΌΠ΅Ρ 1. Π€ΠΎΡΠΌΠ° ΠΏΠΎΠΈΡΠΊΠ°
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Π€ΠΎΡΠΌΠ° Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ°</title>
<style>
.search {
width: 300px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»Ρ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ */
border: 1px solid #000; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
min-height: 20px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° */
}
input[type="search"] {
border: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΠ°ΠΌΠΊΡ */
outline: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΠ²Π΅ΡΠ΅Π½ΠΈΠ΅ Π² Chrome ΠΈ Safari */
-webkit-appearance: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΠ°ΠΌΠΊΡ Π² Chrome ΠΈ Safari */
width: 274px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»Ρ */
vertical-align: middle; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ */
}
input[type="submit"] {
width: 20px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ */
height: 20px; /* ΠΡΡΠΎΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ */
border: none; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΡΠ°ΠΌΠΊΡ */
background: url(images/video.png) no-repeat 50% 50%; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΎΠ½Π° */
}
</style>
</head>
<body>
<form>
<div>
<input type="search" name="q">
<input type="submit" value="">
</div>
</form>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 1.
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ
Π‘Π°ΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎ ΡΠ°Π·Π½ΠΎΠΌΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΄Π΅Π»Π°ΡΡ Π΅Ρ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Ρ Π½Π°Π΄ΠΏΠΈΡΡΡ, ΡΠ΅ΡΠ΅Π· <input type=»image»>, ΠΈΠ»ΠΈ, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅, Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ.
htmlbook.ru