Кнопки в HTML

Нет уважающей себя формы HTML без кнопки отправки. Традиционный синтаксис для создания кнопки отправки:

<input type = "submit" value = "отправить данные">

Еще одна полезная кнопка — «reset», которая — после нажатия — позволяет вернуть форму в исходное состояние, удалив все, что было написано пользователем до сих пор. Вот пример:

<form action = ii> <input type = "text"> <br> <input type = "reset" value = "сброс"> </ form>

Наконец, существует тип универсальной кнопки, которая не выполняет какого-либо конкретного действия, но которая может, например, использоваться для связи событий с JavaScript.

<form action = ii> <input type = "button" value = "универсальная кнопка"> </ form> 

Тег <button> в HTML

В HTML 4 появился тег <button> , который дает возможность создавать кнопки с особенно богатым внешним видом.

Тег <button> , в отличие от тега <input> , дает возможность вставлять текст кнопки между открытием и закрытием одного и того же тега. Это позволяет нам также указывать HTML-код внутри тега.

Поэтому кнопки, которые мы только что видели, должны иметь такую ​​форму:

<form action=https://gospodaretsva.com/ target=”_blank”>
<input type="text"><br>
<button type="button"> универсальная кнопка </button>
<button type="reset"> стереть все</button>
<button type="submit"> отправить</button>
</form>

Благодаря атрибуту «disable» наконец можно отключить кнопки.

<input type="submit" value="послать" disabled>

или также:

<form action = ii> <input disabled = "disabled" type = "submit" value = "send">
<button disabled = "disabled" type = submit> send </ button> </ form>

Поле image для типа ввода

Поле «image» позволяет нам использовать реальные изображения в качестве кнопок формы и назначать им значения благодаря JavaScript; в данном случае это не кнопка, а функциональность. Вот код:

<form action = https://gospodaretsva.com/ target = _blank>
<input name="sendForm" type="image" src="wp-content/uploads/2019/10/images.jpg" alt="отправить" title="отправить" width="50" height="50">
</form>

как видите, если ничего не указано, изображение имеет значение submit. Атрибуты поля изображения очень похожи на атрибуты тега <img>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *