Nick Nick (boxer97) wrote in seo_blog_site,
Nick Nick
boxer97
seo_blog_site

Виды кнопок в html



В этой статье хотелось бы рассказать о создании кнопок в html. В html можно сделать 4 вида баттонов. Может быть, можно сделать и больше, но я расскажу о самых используемых.


Первая кнопка – это баттон «отправить». Эту кнопку обязательно используют в формах. При нажатии на нее данные посылаются обработчику.



Вторая кнопка – это баттон «очистить». Эта кнопка добавляется в форму в основном для удобства. Если человек ошибся, то при нажатии ошибочные данные сбрасываются.



Третья кнопка – это баттон «картинка». Если в форме вы не хотите видеть стандартную, то можно придумать свою. Достаточно ее нарисовать и прописать необходимые теги, чтобы она работала.



И, четвертый вид – это «просто» кнопка. Используется в теле самой страницы, иногда даже не относится к самой форме.



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

И сейчас я покажу, как эти кнопки внедрить в html-документ.

Кнопка «Отправить»

Эта кнопка делается очень просто. Сначала создаем абзац под эту кнопку, затем пишем тег <input ... >, a для «инпута» указываем значение type=“submit“. Submit означает отправить. И для тега <input ... > указываем еще 2 атрибута: 1-й атрибут нам давно знаком – это атрибут name=“submit“, а 2-й атрибут value c значением «Отправить». Этот атрибут будет определять значение этой кнопки, то есть, что эта кнопка будет делать. В нашем случае она будет отправлять данные на сервер.
После нажатия кнопки сразу идет обращение к обработчику, чтобы он отправил данные.

Кнопка «Очистить»
Нетрудно догадаться, что при нажатии этой кнопки значение полей формы очищаются. Эта кнопка делается очень просто. Принцип такой же, как и с предыдущей кнопкой.
Единственное, что для type нужно указать значение «reset», ну и для других знакомых нам атрибутов присвоить соответствующие значения.

Кнопка «Картинка»
Эта кнопка очень распространенная. В большинстве случаев ее только и используют, потому что как-то скучно наблюдать, если у вас на сайте или форме будет стандартная кнопка «отправить». Поэтому многие вебмастера делают так: сначала рисуют картинку или ищут в интернете или заказывают на фрилансе, а затем этой картинке придают значение отправить.
(Когда рисовал сильно не заморачивался, так что прошу сильно не ругать. Если можете нарисовать лучше, тем лучше для вас.)
В type указываем значение «image», далее прописываем ссылку на картинку (указываете, где она у вас расположена), а затем указываем атрибут name с соответствующим значением.
При нажатии эта кнопка также как и первая отправляет данные обработчику.

Кнопка «Просто кнопка»
Эта кнопка ничего не делает, пока ей не придашь какое-нибудь значение. Ее можно применять не только к форме. Если изучить JavaScript, то эту кнопку можно применить в разных целях, причем очень удобной для вас и для пользователей вашего сайта.
Применяйте полученные знания в своих целях!

Желаю вам удачи в изучении html!
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic
  • 0 comments