Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π’Π΅Π³ | HTML справочник

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

ОписаниС

HTML Ρ‚Π΅Π³ <button> создаСт ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΏΠΎΡ…ΠΎΠΆΡƒΡŽ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ элСмСнта <input> со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ submit, reset, button ΠΈΠ»ΠΈ image Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type. Однако, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ элСмСнта <input>, элСмСнт <button> Π½Π΅ относится ΠΊ пустым элСмСнтам, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³, ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ тСкст, изобраТСния ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ HTML-элСмСнты.

Когда Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ элСмСнт <button> Π½Π° Π²Π΅Π±-страницС, Ρ‚ΠΎ вСсь элСмСнт со всСм Π΅Π³ΠΎ содСрТимым становится ΠΎΠ΄Π½ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ внСшний Π²ΠΈΠ΄, ΠΊΠ°ΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°, созданная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <input type=»button»>, Π½ΠΎ ΠΈΠ·-Π·Π° возмоТности ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ HTML-элСмСнты ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС возмоТностСй для примСнСния ΠΊ Π½Π΅ΠΌΡƒ CSS стилСй.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: для измСнСния стандартного Π²ΠΈΠ΄Π° курсора ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS свойство cursor.

Атрибуты

autofocus:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ фокус послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы. ЗначСния для логичСского Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° autofocus ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ способами:

<button autofocus></button>
<button autofocus="autofocus"></button>
<button autofocus=""></button>

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ поддСрТиваСтся Π² IE9 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях.

disabled:
ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² случаС, ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΡ‚Π°Ρ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… условий (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Ρ„Π»Π°ΠΆΠΊΠ° ΠΈ Ρ‚Π΄.), ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript. ЗначСния для логичСского Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° disabled ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ способами:
<button disabled></button> <button disabled="disabled"></button> <button disabled=""></button>
form:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊ ΠΊΠ°ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅ относится данная ΠΊΠ½ΠΎΠΏΠΊΠ°. Π’ качСствС значСния выступаСт ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² Ρ„ΠΎΡ€ΠΌ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° зависит ΠΎΡ‚ количСства ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΊΠ΅ Ρ„ΠΎΡ€ΠΌ:

<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.html" method="get">
    Имя: <input type="text" name="fname"><br>
    Ѐамилия: <input type="text" name="lname">
  </form>

  <p>Кнопка находится Π²Π½Π΅ элСмСнта form, Π½ΠΎ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Ρ„ΠΎΡ€ΠΌΡ‹.</p>

  <button type="submit" form="nameform" value="Submit">ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ</button>

</body>
</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ поддСрТиваСтся Π² Internet Explorer.

formaction:
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ адрСс, ΠΊΡƒΠ΄Π° ΠΏΠ΅Ρ€Π΅ΡΡ‹Π»Π°ΡŽΡ‚ΡΡ Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ. Если для Ρ„ΠΎΡ€ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ action, Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ formaction ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:

<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.asp" method="get">
    Имя: <input type="text" name="fname"><br>
    Ѐамилия: <input type="text" name="lname"><br>
    <button type="submit">ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ</button><br>
    <button type="submit" formaction="demo_admin.html">
	  ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚ ΠΈΠΌΠ΅Π½ΠΈ администратора
	</button>
</form>

</body>
</html>
Атрибут formaction ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠ½ΠΎΠΏΠΎΠΊ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type=»submit».

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ поддСрТиваСтся Π² IE9 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях.

formenctype:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊΠΈΠΌ способом Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΎΠΉ Π½Π° сСрвСр. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠ½ΠΎΠΏΠΎΠΊ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type=»submit». Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:
  • application/x-www-form-urlencoded — всС символы ΠΊΠΎΠ΄ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΎΠΉ (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).
  • multipart/form-data — символы Π½Π΅ ΠΊΠΎΠ΄ΠΈΡ€ΡƒΡŽΡ‚ΡΡ (этот ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ использовании Ρ„ΠΎΡ€ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ„Π°ΠΉΠ» управлСния Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ).
  • text/plain — ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ΡΡ Π² символ «+», Π½ΠΎ символы Π½Π΅ ΠΊΠΎΠ΄ΠΈΡ€ΡƒΡŽΡ‚ΡΡ.

<!DOCTYPE html>
<html>
<body>

  <form action="demo_post_enctype.asp" method="post">
    Имя: <input type="text" name="fname" value="Π‘Ρ‚ΠΈΠ² Π‘Π°Ρ‚Ρ‚Π»Π΅Ρ€"><br>
    <button type="submit" >ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ с ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ символов</button>
    <button type="submit" formenctype="text/plain">
	  ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π±Π΅Π· кодирования символов
	</button>
  </form>

</body>
</html>
Если для Ρ„ΠΎΡ€ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ enctype, Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ formenctype ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ поддСрТиваСтся Π² IE9 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях.

formmethod:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ HTTP Π±ΡƒΠ΄Π΅Ρ‚ использован ΠΏΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΡ‹. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠ½ΠΎΠΏΠΎΠΊ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type=»submit». Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:
  • get — Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² ΠΊΠΎΠ½Ρ†Π΅ URL-адрСса: URL-адрСс?имя=Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅?имя=Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
  • post — отправляСт Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠ°ΠΊ HTTP послС Ρ‚Ρ€Π°Π½Π·Π°ΠΊΡ†ΠΈΠΈ

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Ѐамилия: <input type="text" name="lname"><br>
  <button type="submit" >ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ</button>
  <button type="submit" formmethod="post" formaction="demo_post.asp">
    ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ POST
  </button>
</form>

</body>
</html>
Если для Ρ„ΠΎΡ€ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ method, Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ formmethod ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ поддСрТиваСтся Π² IE9 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях.

formnovalidate:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒΡΡ Π½Π° ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠ½ΠΎΠΏΠΎΠΊ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type=»submit». ЗначСния для логичСского Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° autofocus ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ способами:

<button formnovalidate></button>
<button formnovalidate="formnovalidate"></button>
<button formnovalidate=""></button>
Если для Ρ„ΠΎΡ€ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ novalidate, Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ formnovalidate ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ поддСрТиваСтся Π² IE9 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях, ΠΈ Π² Safari.

formtarget:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Π³Π΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ ΠΎΡ‚Π²Π΅Ρ‚ послС ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠ½ΠΎΠΏΠΎΠΊ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type=»submit». Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:
  • _blank — ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅.
  • _self — ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚ Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ, Π³Π΄Π΅ располагаСтся ссылка (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).
  • _parent — ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚ Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ ΠΎΠΊΠ½Π΅.
  • _top — ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚ Π²ΠΎ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π°.
  • имя_Ρ„Ρ€Π΅ΠΉΠΌΠ° — ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚ Π² iframe, имя ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² качСствС значСния.

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Ѐамилия: <input type="text" name="lname"><br>
  <button type="submit">ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ</button>
  <button type="submit" formtarget="_blank">
    ΠžΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅
  </button>
</form>

</body>
</html>
Если для Ρ„ΠΎΡ€ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ target, Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ formtarget ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ поддСрТиваСтся Π² IE9 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях.

name:
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя для элСмСнта <button>. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ссылки Π½Π° Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ послС Π΅Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ, ΠΈΠ»ΠΈ для ссылки Π½Π° элСмСнт Π² JavaScript.

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄Π²ΡƒΡ…:
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>

</body>
</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты <button> ΠΌΠΎΠ³ΡƒΡ‚ совмСстно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ имя. Π­Ρ‚ΠΎ позволяСт ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ использованиС Ρ„ΠΎΡ€ΠΌΡ‹.

type:
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ‚ΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
  • button — активная ΠΊΠ½ΠΎΠΏΠΊΠ°
  • reset — ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΎΡ‡ΠΈΡ‰Π°ΡŽΡ‰Π°Ρ Ρ„ΠΎΡ€ΠΌΡƒ ΠΎΡ‚ Π²Π²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…
  • submit — ΠΊΠ½ΠΎΠΏΠΊΠ° для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΡ‹ (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Ѐамилия: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ</button>
  <button type="reset" value="Reset">Π‘Ρ‚Π΅Ρ€Π΅Ρ‚ΡŒ</button>
</form>

</body>
</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: всСгда ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type для ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type.

value:
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ Π½Π° сСрвСр ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ скриптов.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ элСмСнт <button> Π² HTML-Ρ„ΠΎΡ€ΠΌΠ΅, Ρ‚ΠΎ IE7 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΠ΅ вСрсии этого Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ тСкст Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‰ΠΈΠΉΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ <button> ΠΈ </button>. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ содСрТимоС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° value.

Π’Π΅Π³ <button> Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ Бобытия

Π‘Ρ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

НСт.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<button type="button">НаТми на мСня!</button> 

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ‚Π΅Π³Π° <button>

puzzleweb.ru

Кнопки | Π£Ρ‡Π΅Π±Π½Ρ‹Π΅ курсы | WebReference

Кнопки ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· популярных элСмСнтов интСрфСйса ΠΈ часто ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΠΎΡ€ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π²Π²Π΅Π΄Ρ‘Π½Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ΅ Π½Π° сСрвСр.

Кнопки Π½Π° Π²Π΅Π±-страницС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ нСсколькими способами — с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <input> ΠΈΠ»ΠΈ элСмСнта <button>.

Рассмотрим Π²Π½Π°Ρ‡Π°Π»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· <input> ΠΈ Π΅Π³ΠΎ синтаксис.

<input type="button" value="ВСкст">

Атрибуты ΠΊΠ½ΠΎΠΏΠΊΠΈ пСрСчислСны Π² Ρ‚Π°Π±Π».Β 1.

Π’Π°Π±Π». 1. Атрибуты <input>
ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
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>.

Кнопки, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <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

Кнопки | WebReference

Кнопки ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых понятных ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов интСрфСйса. По ΠΈΡ… Π²ΠΈΠ΄Ρƒ сразу становится понятно, Ρ‡Ρ‚ΠΎ СдинствСнноС дСйствиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ с Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΒ β€” это Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ Π½Π° Π½ΠΈΡ…. Π—Π° счёт этой особСнности ΠΊΠ½ΠΎΠΏΠΊΠΈ часто ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ…, особСнно ΠΏΡ€ΠΈ ΠΈΡ… ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ ΠΈ очисткС.

ΠšΠ½ΠΎΠΏΠΊΡƒ Π½Π° Π²Π΅Π±-страницС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ двумя способами — с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <input> ΠΈΠ»ΠΈ <button>.

Рассмотрим Π²Π½Π°Ρ‡Π°Π»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· <input> ΠΈ Π΅Π³ΠΎ синтаксис.

<input type="button" Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹>

Атрибуты ΠΊΠ½ΠΎΠΏΠΊΠΈ пСрСчислСны Π² Ρ‚Π°Π±Π».Β 1.

Π’Π°Π±Π». 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>.

Кнопки, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ 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

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

ΠšΡƒΡ€Ρ ΠΏΠΎ вёрсткС сайта Π½Π° CSS Grid

webref.ru

Π’Π΅Π³ | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+6.0+1.0+1.0+1.0+1.0+

БпСцификация

HTML:3.24.015.0XHTML:1.01.1

ОписаниС

Π’Π΅Π³ <button> создаСт Π½Π° Π²Π΅Π±-страницС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠΎ своСму Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌΡ‹ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° <input> (с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type=»button | reset | submit»). Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ этого Ρ‚Π΅Π³Π°, <button> ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ возмоТности ΠΏΠΎ созданию ΠΊΠ½ΠΎΠΏΠΎΠΊ. НапримСр, Π½Π° ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ элСмСнты HTML, Π² Ρ‚ΠΎΠΌ числС изобраТСния. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ стили ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡƒΡ‚Π΅ΠΌ измСнСния ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ².

ВСорСтичСски, Ρ‚Π΅Π³ <button> Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΠΎΡ€ΠΌΡ‹, устанавливаСмой элСмСнтом <form>. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ выводят сообщСниС ΠΎΠ± ошибкС ΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Ρ‚Π΅Π³ΠΎΠΌ <button>, Ссли ΠΎΠ½ встрСчаСтся ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Однако, Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ наТатия Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½Π° сСрвСр, ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ <button> Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <form> ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

Бинтаксис

<form>
  <button>...</button>
</form>

Атрибуты

accesskey
Доступ ΠΊ элСмСнтам Ρ„ΠΎΡ€ΠΌΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ горячих клавиш.
autofocus
УстанавливаСт, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы.
disabled
Π‘Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚ доступ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ элСмСнта.
form
БвязываСт ΠΌΠ΅ΠΆΠ΄Ρƒ собой Ρ„ΠΎΡ€ΠΌΡƒ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ.
formaction
Π—Π°Π΄Π°Ρ‘Ρ‚ адрСс, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΡΡ‹Π»Π°ΡŽΡ‚ΡΡ Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ.
formenctype
Бпособ кодирования Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΡ‹.
formmethod
Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ пСрСсылки Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΡ‹.
formnovalidate
ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅Ρ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ.
formtarget
ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ΅.
name
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя ΠΊΠ½ΠΎΠΏΠΊΠΈ.
type
Π’ΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” обычная, для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° сСрвСр ΠΈΠ»ΠΈ для очистки Ρ„ΠΎΡ€ΠΌΡ‹.
value
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ Π½Π° сСрвСр ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ скриптов.

Π’Π°ΠΊΠΆΠ΅ для этого Ρ‚Π΅Π³Π° доступны ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ события.

Π—Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»Π΅Π½.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Π’Π΅Π³ BUTTON</title>
 </head>
 <body>
  <p><button>Кнопка с тСкстом</button>
  <button><img src="images/umbrella.gif" alt="Π—ΠΎΠ½Ρ‚ΠΈΠΊ" 
         > Кнопка с рисунком</button></p>
 </body>
</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 1.

Рис. 1. Π’ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Safari

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Internet Explorer Π΄ΠΎ вСрсии 7.0 Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ value.

htmlbook.ru

HTML5 | Кнопки

Кнопки

ПослСднСС обновлСниС: 08.04.2016

Кнопки прСдставлСны элСмСнтом button. Они ΠΎΠ±Π»Π°Π΄Π°ΡŽΡ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌΠΈ возмоТностями ΠΏΠΎ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ. Π’Π°ΠΊ, Π² зависимости ΠΎΡ‚ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ:

  • submit: ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹

  • reset: ΠΊΠ½ΠΎΠΏΠΊΠ° сброса Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Ρ„ΠΎΡ€ΠΌΡ‹

  • button: ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ назначСния

Если ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρƒ Π½Π΅Π΅ установлСн Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type="submit", Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ Ρƒ Π½Π΅Π΅ ряд Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²:

  • form: опрСдСляСт Ρ„ΠΎΡ€ΠΌΡƒ, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ

  • formaction: устанавливаСт адрСс, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отправляСтся Ρ„ΠΎΡ€ΠΌΠ°. Если Ρƒ элСмСнта form Π·Π°Π΄Π°Π½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ action, Ρ‚ΠΎ ΠΎΠ½ пСрСопрСдСляСтся

  • formenctype: устанавливаСт Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…. Если Ρƒ элСмСнта form установлСн Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ enctype, Ρ‚ΠΎ ΠΎΠ½ пСрСопрСдСляСтся

  • formmethod: устанавливаСт ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ (post ΠΈΠ»ΠΈ get). Если Ρƒ элСмСнта form установлСн Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ method, Ρ‚ΠΎ ΠΎΠ½ пСрСопрСдСляСтся

НапримСр, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ Π½Π° Ρ„ΠΎΡ€ΠΌΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ сброса:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Π€ΠΎΡ€ΠΌΡ‹ Π² HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="login"/></p>
			<p><input type="password" name="password"/></p>
			<p>
				<button type="submit" formmethod="get" formaction="index.html">ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ</button> 
				<button type="reset">ΠžΡ‚ΠΌΠ΅Π½Π°</button>
			</p>
		</form>
	</body>
</html>

ΠšΡ€ΠΎΠΌΠ΅ элСмСнта button для создания ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт input, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ€Π°Π²Π΅Π½ submit ΠΈΠ»ΠΈ reset. НапримСр:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Π€ΠΎΡ€ΠΌΡ‹ Π² HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="login"/></p>
			<p><input type="password" name="password"/></p>
			<p>
				<input type="submit" value="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ" /> 
				<input type="reset" value="ΠžΡ‚ΠΌΠ΅Π½Π°" />
			</p>
		</form>
	</body>
</html>

И Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ элСмСнт input с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type="image" позволяСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Π€ΠΎΡ€ΠΌΠ° Π²Π²ΠΎΠ΄Π° Π² HTML5</title>
	</head>
	<body>
		<form>
			<p>
				<input type="text" name="search" />
				<input type="image" src="search.png" name="submit" />
			</p>
		</form>
	</body>
</html>

ΠšΡ€ΠΎΠΌΠ΅ наличия изобраТСния Π² ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ эта ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Π° стандартной ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ input type="submit" ΠΈΠ»ΠΈ button type="submit".

metanit.com

Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈ text — html

НС ΡƒΠ²Π΅Ρ€Π΅Π½, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ свои Π»Π΅Π³Π΅Π½Π΄Ρ‹, Π½ΠΎ:

Кнопка ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ с <button>

Как и с:

<button type="submit">(html content)</button>

IE6 ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ вСсь тСкст для этой ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. ИспользованиС <button> Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ большС свободы ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Π½Π°Π΄ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’ΠΎ всСх Π΅Π³ΠΎ намСрСниях ΠΈ цСлях это казалось прСвосходным сначала, Π½ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΡΡŽΡ‚ использованиС Π² Ρ€Π°Π·Ρ‹.

Π’ вашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ IE6 ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ text Π½Π° сСрвСр, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ отправят. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ совмСстимым с кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <button type="submit" value="text">text</button>. Π•Ρ‰Π΅ Π»ΡƒΡ‡ΡˆΠ΅: Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ, Ссли Π²Ρ‹ добавляСтС HTML, становится довольно слоТным Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΎ Π½Π° сторонС сСрвСра. ВмСсто этого, Ссли Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ скрытоС ΠΏΠΎΠ»Π΅.

Кнопка с <input>

Как и с:

<input type="button" />

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ это ΠΏΠΎΡ‡Ρ‚ΠΈ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚. Он Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ Π²Π°ΡˆΡƒ Ρ„ΠΎΡ€ΠΌΡƒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСкст Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π•Π³ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ (ΠΈ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌ) Π½Π°ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ΠΌ Π±Ρ‹Π»ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ script Π±Π΅Π· нСобходимости ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° сСрвСр.

ΠžΠ±Ρ‹Ρ‡Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ с <input>

Как и с:

<input type="submit" />

Как ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ, Π½ΠΎ фактичСски прСдставляСт ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ.

Кнопка ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <input>

Как и с:

<input type="image" />

Как ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ (submit), ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ Ρ„ΠΎΡ€ΠΌΡƒ, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. РаньшС это Π±Ρ‹Π» ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ способ использования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² качСствС ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΠ³Π΄Π° Ρ„ΠΎΡ€ΠΌΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Π»Π° ΠΏΠΎΠ΄Π°Π²Π°Ρ‚ΡŒΡΡ. Для большСго контроля Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ <button>. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΠΊΠ°Ρ€Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° сторонС сСрвСра, Π½ΠΎ Π² наши Π΄Π½ΠΈ это Ρ€Π΅Π΄ΠΊΠΎΡΡ‚ΡŒ. Когда Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ usemap ΠΈ (с ΠΈΠ»ΠΈ Π±Π΅Π· этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°), Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ отправляСт ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΌΡ‹ΡˆΠΈ/указатСля X/Y Π½Π° сСрвСр (Ρ‚ΠΎΡ‡Π½Π΅Π΅, мСстополоТСниС указатСля ΠΌΡ‹ΡˆΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° наТатия Π­Ρ‚ΠΎ). Если Π²Ρ‹ просто ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ эти Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, это Π½Π΅ Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ, замаскированная ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ различия ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π½ΠΎ всС Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ value, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚Π΅Π³Π° <button>, ΠΊΠ°ΠΊ описано Π²Ρ‹ΡˆΠ΅.

qaru.site

Π—Π°ΠΌΠ΅Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ submit Π² Ρ„ΠΎΡ€ΠΌΠ΅ html

ЦСль:
БСгодня наша Π·Π°Π΄Π°Ρ‡Π° Π·Π°ΠΌΠ΅Π½Π° стандартной ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΒ» Π½Π° ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ. Кнопка выполняСт ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΈΠΏ Β«submitΒ». МоТно ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ с Β«submitΒ» Π½Π° Β«imageΒ» ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Β«srcΒ», Π½ΠΎ наша Π·Π°Π΄Π°Ρ‡Π° Π½Π° сСгодня это ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ Β«submitΒ» Π½Π° мСстС ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.
Β 
ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅:
Для Ρ‡Π΅Π³ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ? Всё просто, для придания эстСтичного Π²ΠΈΠ΄Π° Ρ‚ΠΎΠΉ самой ΠΊΠ½ΠΎΠΏΠΊΠ΅.
Π’ΠΎΡ‚ для сравнСния.Β  Наглядно Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ вторая ΠΊΠ½ΠΎΠΏΠΊΠ° смотрится Π»ΡƒΡ‡ΡˆΠ΅.
Β 
РСшСниС:
Для выполнСния Π΄Π°Π½Π½ΠΎΠΉ Ρ†Π΅Π»ΠΈ ΠΊΠ°ΠΊ ΠΈ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Β«inputΒ» с Ρ‚ΠΈΠΏΠΎΠΌ Β«submitΒ». Π•Ρ‰Ρ‘ Π½Π°ΠΌ понадобится ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ класс Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй Β«*.cssΒ»
Π’ΠΎΡ‚ ΠΊΠΎΠ΄ для html-Ρ„Π°ΠΉΠ»Π°:

<input type=»submit» name=»submit» value=»ΠžΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ» />

А Π²ΠΎΡ‚ ΠΈ css:

.superbutton {
width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}

Β 
Β 
Π£ΠΊΡ€Π°ΡˆΠ°Π΅ΠΌ:
Для ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π΅ ΠΊΠ°Ρ€Π΄ΠΈΠ½Π°Π»ΡŒΠ½ΠΎ, Π° всСго лишь Π½Π° Ρ‚ΠΎΠ½ свСтлСС ΠΈΠ»ΠΈ Ρ‚Π΅ΠΌΠ½Π΅Π΅. Π― ΠΏΡ€ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π΅Π» Π·Π°Ρ‚Π΅ΠΌΠ½ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ. Для этого Π² css добавляСм:

.superbutton:hover{
background:#358DE5;
}

Β Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΠΆΠΈΠ»Π°. На статичной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Ρ€Π°Π·Π½ΠΎΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π½Π΅ Ρ‚Π°ΠΊ Π·Π°ΠΌΠ΅Ρ‚Π½Π° ΠΊΠΎΠ³Π΄Π° Ρ‚Ρ‹ наводишь ΠΌΡ‹ΡˆΡŒ ΠΈ Ρ†Π²Π΅Ρ‚ Π² Ρ‚ΡƒΠΆΠ΅ сСкунду мСняСтся накладывая Π±ΠΎΠ»Π΅Π΅ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ.
Β 
ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
И всё Π²Ρ€ΠΎΠ΄Π΅ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΈ выглядит Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ‚Π΅ΠΌΠ½Π΅Π΅Ρ‚, Π½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ ΡƒΠΆΠ°ΡΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ. Π•Ρ‰Ρ‘ эту Ρ€Π°ΠΌΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ Ссли наша ΠΊΠ½ΠΎΠΏΠΊΠ° находится Π² фокусС, Π² Ρ‚ΠΎΠΌ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Tab ΠΏΠ΅Ρ€Π΅Π±ΠΈΡ€Π°Π΅Ρ‚ элСмСнты Π½Π° страницС.
Для этого ΠΌΡ‹ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ Π² css Π΅Ρ‰Ρ‘ 2 псСвдо класса, ΠΊΠ°ΠΊ ΠΈ Β«hoverΒ». Π­Ρ‚ΠΎ классы Β«activeΒ» ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Π²ΠΈΠ΄ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ класс Β«focusΒ» ΠΏΡ€ΠΈ фокусС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. Но Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρƒ нас input ΠΈ присвоСнный Π΅ΠΌΡƒ класс, Ρ‚ΠΎ active ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.
Π’ΠΎΡ‚ ΠΊΠΎΠ΄:

. superbutton:focus{
outline:none;
}

Please enable JavaScript to view the comments powered by Disqus.

u2site.ru