Как изменить размер кнопки submit html

Как изменить размер кнопки submit html

Кнопку на веб-странице можно создать двумя способами — с помощью тега INPUT и тега BUTTON.

1. Добавление кнопки через

2. Добавление кнопки через

В отличие от тега , тег предлагает расширенные возможности по созданию кнопок.
Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения и таблицы.

Кнопка SUBMIT

Для отправки данных на сервер предназначена специальная кнопка SUBMIT.
Ее вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега . Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.

Синтаксис создания кнопки SUBMIT зависит от используемого тега или .

Надпись на кнопке

Пример 1. Кнопка для отправки данных на электронную почту

Если значение параметра value не указывать, на кнопке автоматически появится надпись «Подача запроса»

Кнопка RESET

При нажатии на кнопку RESET, данные формы возвращаются в первоначальное значение.
Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки RESET лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придется заполнять форму заново.

Синтаксис создания кнопки RESET.

Надпись на кнопке

Пример 2. Кнопка для очистки формы

После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нем снова появится надпись «Введите текст».

Если надпись на кнопке опустить (не задавать параметр value), на кнопке по умолчанию будет добавлен текст «Сброс» или «Reset».

Как изменить размер кнопки submit.

Бывает так, что размеры стандартной кнопки submit не подходят. Например, нам бы хотелось изменить ее размер и сделать крупнее. Способов здесь достаточно много, но в рамках данного поста мы рассмотрим лишь один наиболее простой способ, как изменить размер кнопки submit, используя для этого css-стили.

Допустим, у нас есть простейшая форма с одним текстовым полем и кнопкой submit.

1 2 3 4 5 6 7 8 9 10

Если мы сейчас откроем итоговый html-файл с этим кодом, то увидим, что кнопка приобрела размер в соответствии с величиной текста «send» с небольшими отступами вокруг него. Это отображение по умолчанию. Для изменения размера кнопки мы добавим к ней свой пользовательский класс, а для класса пропишем свойства в хэдере страницы (также стили можно разместить в подключаемом css-файле).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   .my_button       

Теперь кнопка приобретет квадратную форму (размеры приведены здесь для примера). Таким образом, вы можете назначать кнопке любую произвольную высоту или ширину.

Другие посты

• Курсив в html. Как сделать текст на странице курсивом?
• HTML ссылка. Создание ссылок в HTML.
• Тег H1: что, как и зачем.
• Как вставить картинку в HTML.
• Как сделать в HTML подчеркнутый текст.

Как задать ширину и высоту Submit и Reset (Opera)

Доброго времени суток.
В таблице стилей все padding и margin выставил в ноль по умолчанию.
После этого кнопки Submit и Reset в агенте Opera приняли ширину и высоту введенного в них текста, что выглядит не очень красиво.
Проверил в IE 6.0 — все осталось как было до обнуления.
Вопрос — как задать высоту и ширину для указанных кнопок?

Заранее спасибо за ответы.

ZitosS_32

Совесть

Регистрация 12.03.2006 Сообщения 852

input < width: 100px; //% height: 20px; background-color: #FF9999; border: 1px solid #000; >

А лучше приведите код который у вас не работает

Tamerlan

New Member

Регистрация 25.03.2008 Сообщения 6

Спасибо за предложенный вариант, но это проставило значения ширины и высоты для всех элементов Input, включая поля ввода в форме обратной связи.

Ниже прилагаю код простой формы связи, в которой необходимо выставить ширину и высоту только для кнопок Submit и Reset.

 
Ваше Имя: 
 
Ваш Email: 
 
Сообщение: 

 
  

Tamerlan

New Member

Регистрация 25.03.2008 Сообщения 6

Вопрос был частично решен на другом форуме.

Изменить размеры для отдельно взятых кнопок Submit и Reset (расположенных на одной странице) можно путем добавления стиля с указанными высотой и шириной к каждой из кнопок.

А как можно определить это один раз в таблице стилей, чтобы не прописывать на каждой странице (если страниц много)?

viKing

Well-Known Member

Регистрация 18.04.2006 Сообщения 103
не уж то так трудно определить класс? :huh:

RoamingFire

Well-Known Member

Регистрация 04.01.2008 Сообщения 145
файл style.css

.BUTTON

«Не уж-то так трудно» самому додуматся?

зы
Вообще, что-то люди пошли то-ли ленивые, то ли фиг знает какие. «Сделайте пожалуйста, так и вот так, хотя не так. » ппц Можно заглянуть в справочник HTML/CSS и посмотреть.

ZitosS_32

Совесть

Регистрация 12.03.2006 Сообщения 852

Давайте не будем, все мы учимся, и если мы чео-то не знаем, то тут нужна помощь,а не критика в данном вопросе. :biggrin:

RoamingFire

Well-Known Member

Регистрация 04.01.2008 Сообщения 145

Давайте не будем, все мы учимся, и если мы чео-то не знаем, то тут нужна помощь,а не критика в данном вопросе. :biggrin:

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

Tamerlan

New Member

Регистрация 25.03.2008 Сообщения 6

Спасибо.
Все действительно было просто.
Оказалось, решение все это время было под носом.
Не судите строго. Всего месяц, как начал изучать HTML и CSS, и порой простые вещи вызывают затруднение.

Tamerlan

New Member

Регистрация 25.03.2008 Сообщения 6

Но хочу внести небольшое уточнение: исходя из данного варианта, на каждой странице, содержащей кнопки Submit и Reset, все равно придется вводить класс .button для каждого элемента.
Вопрос же был: можно ли Один раз прописать параметр в таблице стилей, чтобы он применялся ко всем элементам (в данном случае кнопкам) Submit и Reset на всех страницах.

ZitosS_32

Совесть

Регистрация 12.03.2006 Сообщения 852

Вроде как submit и reset это не кнопки а только тип поля input, поэтому тут без JS не обойтись, но это будет совсем ужасным стилем.
Лучше не мучаться и либо писать для всех submit и reset свой класс, либо сделать как я показал, один стиль для всего, правда это и на простые текстовые поля влияет.
Если нужен вариант на JS пишите, попробую осуществить :biggrin:

Tamerlan

New Member

Регистрация 25.03.2008 Сообщения 6

Alex, спасибо.
Вы правы, не хочется загромождать страницы дополнительными скриптами.
Вариант с добавлением стиля к каждому элементу Submit и Reset является в данном случае наиболее оптимальным.

Атрибуты

Кроме добавления классов мы можем ориентироваться на наличие атрибутов элемента и в зависимости от их значений менять стиль кнопок.

Атрибут type

Этот атрибут определяет роль кнопки: обычная, для отправки формы или для её очистки. В табл. 1 показаны возможные значения атрибута type.

Кнопка

 
Отправить 

 
 Отправить Очистить 

По умолчанию к type применяется значение submit , поэтому внутри формы у кнопки атрибут type можно опустить.

По внешнему виду кнопки с разными ролями никак не различаются между собой, но через селекторы атрибутов кнопкам можно задать разный стиль. Селекторы для определения стилей кнопок будут следующими:

• button[type=»button»]
• button[type=»submit»]
• button[type=»reset»]

Чтобы не повторять одинаковые стилевые правила, сперва добавляем свойства к селектору button , а затем уже к селекторам с button[type] . Свойства у button наследуются, поэтому переопределить нужно только различающиеся значения. В итоге все кнопки будут оформлены единообразно, различаясь друг с другом цветом.

В примере 1 показана форма для поиска с текстовым полем и двумя кнопками: первая кнопка отправляет введённую текстовую строку на сервер, а вторая очищает форму. Эти кнопки различаются цветом фона, текста и рамки.

Пример 1. Кнопки разных цветов

Здесь вокруг кнопки с type=»reset» добавлена рамка, что несколько увеличивает размер кнопки. Чтобы все кнопки получились одинаковой высоты, к ним добавляется рамка, цвет которой совпадает с цветом фона.

Вместо изменения цвета, рядом с надписью на кнопке можно показать соответствующую иконку. Элемент позволяет комбинировать изображения с текстом.

 Добавить в корзину

Альтернативный путь состоит в использовании ::before, он создаёт псевдоэлемент до содержимого самого элемента, в нашем случае, . Для этого псевдоэлемента иконку выводим как фоновую картинку через свойство background (пример 2).

Пример 2. Использование ::before

У свойства background из примера указано три параметра:

• 0 — картинка располагается в левом верхнем углу;
• cover — картинка масштабируется и вписывается в размеры иконки (они определяются свойствами width и height);
• url() — адрес картинки.

Атрибут disabled

Атрибут disabled, добавленный к , блокирует кнопку, после чего по такой кнопке нельзя щёлкнуть и она отображается бледнее обычной.

Обычная кнопка Блокированная кнопка

Для управления стилем блокированной кнопкой можно воспользоваться селектором button[disabled] , а также более современным методом — псевдоклассом :disabled.

В примере 3 у блокированной кнопки меняется цвет фона, текста и вид курсора при наведении на кнопку.

Пример 3. Использование :disabled

Здесь изначально кнопка заблокирована через атрибут disabled и становится доступной после написания любого символа в текстовом поле. Если текст стереть, то кнопка вернётся к своему заблокированному состоянию.

Итоги

• У элемента есть два часто используемых атрибута: type и disabled.
• Атрибут type определяет роль кнопки: обычная кнопка, кнопка для отправки формы и кнопка для возврата введённых в форму данных к исходным значениям.
• Для стилизации кнопок с разными значениями type применяются селекторы button[type=»submit»] , button[type=»reset»] , button[type=»button»] .
• Атрибут disabled блокирует кнопку от нажатия — по такой кнопке нельзя щёлкнуть. С помощью JavaScript атрибут можно убирать или добавлять, в зависимости от заданных условий.
• Стиль заблокированной кнопки меняется через псевдокласс :disabled, для этого используется селектор button:disabled .

Автор: Влад Мержевич
Последнее изменение: 25.05.2023

Создайте набор кнопок для разных ситуаций: кнопка по умолчанию, кнопка для отправки формы, кнопка для очистки формы, заблокированная кнопка. Их вид показан на рис. 1.

Рис. 1. Кнопки разных типов

Создайте кнопку с иконкой корзины, показанную на рис. 1.