26.02.2012, 12:39

Работа с тегом <button>


Тег <button> предназначен для создания кнопки, и сейчас я расскажу о нем все, что знаю сам.
Самый простой код выглядит так
Code
<button>Кнопка</button>


* Закрывающий тег обязателен!

Теперь я расскажу об атрибутах, которые могут быть прописаны к тегу <button>

disabled - Делает кнопку неактивной
Code
<button disabled="disabled">Текст</button>



form - связывает форму и кнопку между собой
Code
<button form="значение id тега <form>">...</button>


formtarget - открывает результат в новом окне

name - задает уникальное имя кнопке
Code
<button name="имя">Текст</button>


type - задает тип кнопки
Code
<button type="тип">Текст</button>

button - Обычная кнопка
reset - Кнопка для очистки введенных данных формы
submit - Кнопка для отправки данных формы на сервер

title - подсказка
Code
<button title="Подсказка">Текст</button>



id - задает id кнопке
Code
<button id="ololo">Текст</button>


class - задает class кнопке
Code
<button class="ololo">Текст</button>


style - задает стиль кнопке

Теперь поговорим о стилизации кнопки. Стиль кнопке можно задать с помощью атрибута style или же через тег <style>. Для того чтобы осуществить второй вариант, нужно прописать id или class кнопке.
Например, зададим кнопке id или class = ololo, тогда стиль можно будет задать так:
Code
<style>.ololo { /*Задает стиль для class'a*/
Стиль}
#ololo { /*Задает стиль для id*/
Стиль}</style>
<button class="ololo" id="ololo">Кнопка</button>


Через атрибут style стиль можно задать так:
Code
<button style="Стиль">Кнопка</button>


Теперь об основных стилях, который можно прописать к тегу <button>:
1. Фон
Фон можно задать параметром background
Code
background: #000000
или
Code
background: url('ссылка на изображение')


2. Цвет текста
Цвет задается параметром color
Code
color: #000000;


3. Границы
Границы задаются параметром border
Code
border: 1px solid #000000;

1px - толщина; Solid - тип; #000000 - цвет

4. Закругление углов
Закругление задается так:
Code
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;


5. Отступы
Отступы задаются параметрами margin и padding.
Первый нужен для того чтобы создать отступ от кнопки, а второй - для того чтобы создать отступ
границы кнопки от текста внутри кнопки.
Code
margin: 10px;
padding: 5px;


Тут перечислены далеко не все стили, а только самые основные!

Помимо текста, на кнопке еще можно размещать изображения. Делается это так:

Code
<button><img src="ссылка на изображение">Справка</button>




На этом все! Спасибо за внимание! wink

Источник/Автор: pcg.my1.ru - Victor

Категория: Прочее | Добавил: Victor (26.02.2012) Просмотров: 2145 | Рейтинг: 4.9/9
Всего комментариев: 2
0  
1 Сай_22 -Infoscript Team-  (27.02.2012 10:01) [Материал]
Аватар пользователя
Ребят, вы так по каждому тегу пройдетесь? biggrin

0  
2 LexaBLR   (03.07.2012 02:03) [Материал]
Аватар пользователя
Я например не хера не знал про BUTTON! biggrin
Так что кому как)) Но статейка полезная)) Спасибо!
Victor! Лови +

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]