Java Script. Пример изменения надписи на кнопке.

Содержание

Java Script. Пример изменения надписи на кнопке.

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

В наиболее общем виде оператор

Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.

С помощью параметра ACTION указывается адрес URL загрузочного файла программы CGI, а также передаваемые расширению параметры. В том случае, когда форма предназначена для передачи данных расширению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр можно опустить.

Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.

Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.

Помимо параметров, для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web. Назначив обработчик события, сценарий JavaScript может управлять этим процессом.

Свойства объекта form

Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств приведен ниже:

Свойство Описание
action Содержит значение параметра ACTION
elements Массив всех элементов (полей и органов управления), определенных в форме
encoding Содержит значение параметра ENCTYPE
length Размер массива elements
method Содержит значение параметра METHOD
target Содержит значение параметра TARGET

Большинство свойств первого набора просто отражает значения соответствующих параметров оператора

Переключатель checkbox

Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей. В форме переключатель checkbox создается с помощью оператора с параметром TYPE, равным строке «checkbox»:

Параметр NAME задает имя переключателя. Это имя можно использовать для определения состояния этого переключателя в сценарии JavaScript.

С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка «on». Сценарий JavaScript также может получить значение параметра VALUE.

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

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

Свойства объекта checkbox

Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора :

Свойство Описание
name Значение параметра NAME
checked Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае — false. С помощью этого свойства сценарий может изменять состояние переключателя
value Значение параметра VALUE
defaultChecked Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае — false. Сценарий может определять или устанавливать значение этого свойства

Методы объекта checkbox

Для объекта checkbox определен один метод click, не имеющий параметров:

При вызове этого метода переключатель устанавливается во включенное состояние.

Переключатель radio

Переключатели типа radio применяются в тех случаях, когда нужно организовать выбор одной из нескольких возможностей. Исходя из этого, в форме обычно располагается несколько таких переключателей. Определение переключателя radio выглядит следующим образом:

Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному. Для того чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.

Свойства объекта radio

Объект radio имеет следующие свойства:

Свойство Описание
name Значение параметра NAME
checked Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае — false. С помощью этого свойства сценарий может изменять состояние переключателя
length Количество переключателей типа radio, определенных в группе с именем, заданным параметром NAME
value Значение параметра VALUE
defaultChecked Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае — false. Сценарий может определять или устанавливать значение этого свойства

Методы объекта radio

Для объекта radio определен метод click, не имеющий параметров:

При вызове этого метода переключатель выбирается для работы.

Пример формы с переключателями

В этом разделе приведен исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе.

Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки — Create Page и Reset.

Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями. Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен — в виде списка.

Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении. В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей. Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.

Листинг 3.2.

Список select

С помощью оператора

Все параметры оператора необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.

Параметр SIZE задает размер видимой части списка в строках.

Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.

Для определения элементов списка предназначен оператор . Оператор может иметь два параметра — VALUE и SELECTED. Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы. После оператора следует текст, отображаемый в строках списка.

Свойства объекта select

Ниже перечислены свойства объекта select, доступные сценарию JavaScript:

Свойство Описание
length Количество элементов (строк) в списке
name Значение параметра NAME
options Массив объектов options, соответствующих элементам массива, заданным при помощи оператора
selectedIndex Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов)

Одним из свойств списка select является массив options. В этом массиве хранятся элементы списка, определенные оператором . Каждый элемент такого массива есть ни что иное как объект со следующим набором свойств:

Свойство Описание
defaultSelected Отражает состояние параметра SELECTED
index Порядковый номер (индекс) элемента списка
length Количество элементов в выбранном объекте
name Значение параметра NAME
selected С помощью свойства selected сценарий JavaScript может выбрать данный элемент
selectedIndex Номер выбранного элемента
text Текст, указанный после оператора
value Значение параметра VALUE

Методы объекта select

Для объекта select определено два метода, не имеющих параметров, — focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй — отобрать этот фокус у списка.

Обработчики событий, связанные с объектом select

Как видно из формата оператора , рассмотренного выше, для списка вы можете определить три обработчика события: onFocus, onBlur и onChange. События onFocus и onBlur возникают, когда список получает и теряет фокус ввода, соответственно. Что же касается события onChange, то оно создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.

Пример сценария, работающего со списком

При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем. В данном примере рассматривается два списка. Первый из них предназначен для выбора цвета, а второй — размера некоторого предмета (в данном случае не имеет значение, какого именно). Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка.

Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.

Листинг 3.3.

Однострочное поле text

Наверное, наиболее часто в формах, размещенных на страницах серверов Web встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор с параметром TYPE, равным значению «text»:

Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Свойства объекта text

Сценариям JavaScript доступны три свойства поля редактирования как объекта класса text:

Свойство Описание
defaultValue Отражает состояние параметра VALUE
name Значение параметра NAME
value Текущее содержимое поля редактирования
Илон Маск рекомендует:  Как сделать рамку вокруг таблицы

Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Заметим, что изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.

Методы объекта text

Для объекта text определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur — отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

Обработчики событий объекта text

Обработчики событий вызываются в следующих случаях:

Обработчик Когда вызывается
onFocus Вызывается, когда поле редактирования получает фокус ввода
onBlur Вызывается, когда поле редактирования теряет фокус ввода
onChange При изменении содержимого поля редактирования
onSelect При выделении содержимого поля редактирования

Пример (проверка анкеты)

Методику работы с текстовыми полями в сценариях JavaScript рассмотрим на примере документа HTML с формой для ввода анкеты.

Наш сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы. В частности, сценарий преобразует символы фамилии в прописные. Если указать возраст, меньший 18 лет, сценарий сделает его равным нулю. Если после заполнения анкеты нажать кнопку Complete, на экране появится диалоговая панель, отображающая содержимое отдельных полей формы. Кнопка Reset устанавливает поля в исходное состояние.

Листинг 3.4.

Многострочное поле textarea

В тех случаях, когда редактируемый текст должен занимать несколько строк, в форме между операторами располагают многострочное текстовое поле:

Здесь с помощью параметра NAME вы должны указать имя поля. Оно нужно для того чтобы сценарий JavaScript мог обращаться к свойствам и методам этого поля.

Параметры ROWS и COLS определяют видимый размер многострочного поля редактирования, задавая, соответственно, количество строк и столбцов (количество символов, которые могут поместиться в одной строке).

Параметр WRAP задает способ свертки текста и может иметь одно из трех следующих значений:

Значение Способ свертки текста
off Свертка выключена, строки отображаются так, как вводятся
virtual Строки сворачиваются только при отображении в окне редактирования, но передаются расширению сервера Web и сценарию JavaScript точно в таком виде, в котором вводятся
physical При свертке в передаваемый текст записываются символы новой строки

Методы объекта textarea

Для объекта textarea определены такие же методы, что и для объекта text. Это методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur — отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого многострочного поля редактирования.

Обработчики событий объекта textarea

Обработчики событий вызываются в следующих случаях:

Обработчик Когда вызывается
onFocus Вызывается, когда поле редактирования получает фокус ввода
onBlur Вызывается, когда поле редактирования теряет фокус ввода
onChange При изменении содержимого поля редактирования
onSelect При выделении содержимого поля редактирования

Пример сценария, заполняющего поле textarea

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

Например, пусть нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы. Если включить переключатель «Благодарность», сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту останется добавить только подпись.

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

Листинг 3.5.

Однострочное поле password

Для ввода такой информации, как пароли, в формах размещают однострочные поля редактирования типа password:

Для поля password можно указать параметры NAME, VALUE и SIZE. Заметим, что это поле не может иметь обработчики событий.

Параметр NAME позволяет задать имя поля, которое необходимо для обращения к свойствам объекта password, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Поле password похоже на поле text, рассмотренное ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.

Свойства объекта password

Сценариям JavaScript доступны три свойства поля редактирования password:

Свойство Описание
defaultValue Отражает состояние параметра VALUE
name Значение параметра NAME
value Текущее содержимое поля редактирования

Так же, как и для поля text, сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Изменяя содержимое свойства value, сценарий может изменить содержимое поля редактирования типа password.

Методы объекта password

Для объекта password определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur — отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

Пример (ввод идентификатора и пароля)

В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.

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

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

Javascript Изменить текст при нажатии кнопки

Привет я хочу, чтобы изменить текст внутри DIV, когда кнопка мыши.

Это отлично работает. У меня есть DIV, который имеет текст и кнопку внутри, в этом случае она имеет слово «Hello». С кодом я есть, когда я нажмите кнопку слово «привет» изменить на слово «МИР». Я хочу сделать что-то вроде последовательности, чтобы изменить слово от «привет» в «мире», от «мира» на «добро» и от «прием» в «моя программа» (пример). и все, что с нажав на кнопку несколько раз.

Если вы ищете это text change cycle произойдет , попробуйте следующее: —

скрипка

Попробуйте этот пример:

Я не думаю, что он может получить проще, чем это :)

Вы можете создать массив с именами.

1-й путь: [с переменным счетчиком]

2-й способ: [без переменного счетчика]

Поместите это в тэгом

Я понимаю, что другой ответ тоже работает, но это короче и проще.

Как изменить надписи кнопок на сайте

В данной статье мы рассмотрим варианты изменения надписей у кнопок на сайте.

Изменение надписей у кнопок «Добавить» и «Под заказ»

Начнем с того, что выясним, как сменить надписи у кнопок «Добавить» и «Под заказ» в карточке товара (рис.1).

В панели администрирования сайта переходим в пункт меню «Интернет-магазин» — «Параметры магазина» — «Категория товаров» (рис.2).

На странице настроек каталога находим раздел «Кнопки у товаров» и меняем названия кнопок на необходимые (рис.2).

Каталог товаров — вкладка «Общие»» src=»files/80/change-buttons/change-buttons-80-20.jpg» style=»border: 1px solid gray;» />
Рисунок 2.

Опция «Отображать кнопку» отвечает за отображение кнопки на сайте. Если галочка не установлена, то кнопка в карточке товара отображаться не будет.

Cохраняем настройки.
Готово (рис.3).

Ручное изменение надписей

Далее рассмотрим изменение прочих надписей и заголовков на сайте.

В качестве примера, будем менять надпись «Отправить сообщение» в форме обратной связи (рис.4).

В панели администрирования сайта переходим в пункт меню «Настройки» — «Системные настройки» — «Локализация» (рис.5).

Системные настройки — вкладка «Локализация» » src=»files/80/change-buttons/change-buttons-80-50.jpg» style=»border: 1px solid gray;» />
Рисунок 5.

На открывшейся странице в строке поиска вводим заголовок, который нам необходимо сменить.

Изменим надпись на «Написать нам» (рис.7). Для сохранения изменений нужно просто нажать в пустое место (рис. 7, п.2).

Щелкаем на заголовок, меняем и нажимаем значок стрелки справа, тем самым обновляя значение в блоке.

И смотрим изменения в клиентской части интернет-магазина (рис.8).

Локализация доступна на русском и английском языках.

То есть, если у Вас есть английская версия сайта, для неё Вы также можете задать свои заголовки, надписи и пр. (рис.9).

Массовое изменение надписей

Также существует возможность массового изменения локализации путем загрузки всех измененных ресурсов через CSV-файл.

Экспортируем файл на странице «Настройки» — «Системные настройки» — «Локализация» (рис.10).

Файл содержит 3 колонки (рис.11):

ResourceKey — ключ ресурса.
ResourceValue — значение ресурса, заголовок.
LanguageCode — локализация: английская или русская.

Меняем необходимые ресурсы в файле, сохраняем его и загружаем через Импорт на странице Локализация(рис. 13).

По описанному методу выше, возможно поменять язык сайта, например, на немецкий.

Для этого выбираете русский вариант, скачиваете файл, далее меняете все ресурсы на немецкий язык, сохраняете и загружаете на сайт.

Таким образом будут переведены все основные элементы сайта, которые прописаны в коде.

Основной контент сайта (товары, описание и прочее) уже загружаете самостоятельно на нужном языке.

Изменение языка магазина

Сменить язык на сайте можно через панель администрирования, пункт меню «Каналы продаж»-«Интернет-магазин» — «Параметры магазина», вкладка «Основные», поле «Язык магазина» (рис.14).

Всё готово. Мы рассмотрели инструкцию по изменению надписей на сайте.

Как изменить текст элемента при помощи jQuery?

Приветствую вас, дорогие друзья!

Давайте рассмотрим как изменить текст в блоке, кнопке, ссылке или другом элементе страницы при помощи jQuery.

Задача замены текста в блоке или кнопке встречается довольно часто. В идеале вычислить фрагмент кода, в котором этот текст выводится и изменить текст в коде. Однако, бывают ситуации, когда такой вариант не подходит, например, если соответствующий код подгружается с другого сайта, или текст должен меняться динамически после определённых действий посетителя, или по каким-то причинам вы не можете внести правки в код, где выводится этот текст.

В таких случая нам на помощь приходит JavaScript, а точнее его библиотека jQuery.

Как изменить текст элемента с помощью jQuery?

Для того чтобы изменить текст в блоке или другом элементе нам нужно:

    1 Определиться с селектором, то есть определить класс или идентификатор этого элемента.

Как вывести текст в JavaScript

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

Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.

Заменить текст в JavaScript

Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.

Для получения параграфа для работы:

Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.

Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо «Заменить текст», выведем внутри p новую запись:

p.innerHTML = ‘Текст заменили’;

После клика по кнопке, замена произошла успешно.

Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.

Что будет, если кавычки оставить пустыми?

Тогда параграф очистится, текущая запись удалится, а новая не вставится.

Добавить текст в JavaScript

Как добавить новый текст к уже существующему, не удаляя текущий?

p.innerHTML += ‘ на сайте‘;

Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.

Эти две записи равнозначны.

p.innerHTML = p.innerHTML + ‘на сайте’;

Берем, что имеется, прибавляем что-нибудь новое и записываем заново.

Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами , а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.

p.innerHTML += ‘ на сайте‘;

Теги выводятся, но не обрабатываются.

Илон Маск рекомендует:  Что такое код ldap_read

p.innerText += ‘ на сайте‘;

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

Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:

  • первый параметр – где вывести информацию
  • второй параметр – это что вывести

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

  • beforeBegin — перед открывающим тегом
  • afterBegin — после открывающего тега
  • beforeEnd – перед закрывающим тегом
  • afterEnd – после закрывающим тегом

Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.

Присвоим параграфу «Замена» всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.

После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.

В инспекторе кода, мы увидим уже новый код, на месте старого.

Выразительный JavaScript: Формы и поля форм

Содержание

Я нынче ж на ученом кутеже
Твое доверье службой завоюю,
Ты ж мне черкни расписку долговую,
Чтоб мне не сомневаться в платеже.

Мефистофель, в «Фаусте» Гёте

Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.

Но их элементы являются частями DOM, как и остальные части страницы, а элементы DOM, представляющие поля формы, поддерживают несколько свойств и событий, которых нет у других элементов. Это делает возможным просматривать и управлять полями ввода из программ JavaScript и добавлять функциональности к классическим формам или использовать формы и поля как основу для построения приложения.

Веб-форма состоит из любого числа полей ввода, окружённых тегом

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

У текстовых полей на несколько строк есть свой тег . У тега должен быть закрывающий тег , и он использует текст внутри этих тегов вместо использования атрибута value.

Когда значение поля изменяется, запускается событие “change”.

Фокус

В отличие от большинства элементов документа HTML, поля форм могут получать фокус ввода клавиатуры. При щелчке или выборе их другим способом они становятся активными, т.е. главными приёмниками клавиатурного ввода.

Если в документе есть текстовое поле, то набираемый текст появится в нём, только если поле имеет фокус ввода. Другие поля по-разному реагируют на клавиатуру. К примеру,

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

Браузеры по традиции позволяют пользователю перемещать фокус клавишей Tab. Мы можем влиять на порядок перемещения через атрибут tabindex. В примере документ будет переносить фокус с текстового поля на кнопку OK, вместо того, чтобы сначала пройти через ссылку help.

По умолчанию, большинство типов элементов HTML не получают фокус. Но добавив tabindex к элементу, вы сделаете возможным получение им фокуса.

Отключённые поля

Все поля можно отключить атрибутом disabled, который существует и в виде свойства элемента объекта DOM.

Отключённые поля не принимают фокус и не изменяются, и в отличие от активных, обычно выглядят серыми и выцветшими.

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

Форма в целом

Когда поле, содержится в элементе

Кнопка с атрибутом type равным submit при нажатии отправляет форму. Нажатие клавиши Enter внутри поля формы имеет тот же эффект.

Отправка формы обычно означает, что браузер переходит на страницу, обозначенную в атрибуте формы action, используя либо GET либо POST запрос. Но перед этим запускается свойство “submit”. Его можно обработать в JavaScript, и обработчик может предотвратить поведение по умолчанию, вызвав на объекте event preventDefault.

Перехват событий “submit” полезен в нескольких случаях. Мы можем написать код, проверяющий допустимость введённых значений и сразу же показать ошибку вместо передачи данных формы. Или мы можем отключить отправку формы по умолчанию и дать программе возможность самой обработать ввод, например используя XMLHttpRequest для отправки данных на сервер без перезагрузки страницы.

Текстовые поля

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

Событие “change” для текстового поля не срабатывает каждый раз при вводе одного символа. Оно срабатывает после потери полем фокуса, когда его значение было изменено. Чтобы мгновенно реагировать на изменение текстового поля нужно зарегистрировать событие “input”, которое срабатывает каждый раз при вводе символа, удалении текста или других манипуляциях с содержимым поля.

В следующем примере мы видим текстовое поле и счётчик, показывающий текущую длину введённого текста.

Галочки и радиокнопки

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

Метод document.getElementsByName выдаёт все элементы с заданным атрибутом name. Пример перебирает их (посредством обычного цикла for, а не forEach, потому что возвращаемая коллекция – не настоящий массив) и регистрирует обработчик событий для каждого элемента. Помните, что у объектов событий есть свойство target, относящееся к элементу, который запустил событие. Это полезно для создания обработчиков событий – наш обработчик может быть вызван разными элементами, и у него должен быть способ получить доступ к текущему элементу, который его вызвал.

Поля select

Поля select похожи на радиокнопки – они также позволяют выбрать из нескольких вариантов. Но если радиокнопки позволяют нам контролировать раскладку вариантов, то вид поля

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

Атрибут size тега используется для задания количества вариантов, которые видны одновременно – так вы можете влиять на внешний вид выпадушки. К примеру, назначив size 3, вы увидите три строки одновременно, безотносительно того, присутствует ли опция multiple.

У каждого тега есть значение. Его можно определить атрибутом value, но если он не задан, то значение тега определяет текст, находящийся внутри тега .. . Свойство value элемента отражает текущий выбранный вариант. Для поля с возможностью выбора нескольких вариантов это свойство не особо нужно, т.к. в нём будет содержаться только один из нескольких выбранных вариантов.

Файловое поле

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

Файловое поле обычно выглядит как кнопка с надписью вроде «Выберите файл», с информацией про выбранный файл рядом с ней.

Свойство files элемента – массивоподобный объект (не настоящий массив), содержащий список выбранных файлов. Изначально он пуст. У элемента нет простого свойства file, потому что пользователь может выбрать несколько файлов за раз при включённом атрибуте multiple.

У объектов в свойстве files есть свойства имя (имя файла), размер (размер файла в байтах), и тип (тип файла в смысле media type — text/plain или image/jpeg).

Чего у него нет, так это свойства, содержащего содержимое файла. Чтобы получить содержимое, приходиться постараться. Так как чтение файла с диска занимает длительное время, интерфейс должен быть асинхронным, чтобы документ не замирал. Конструктор FileReader можно представлять себе, как конструктор XMLHttpRequest, только для файлов.

Чтение файла происходит при помощи создания объекта FileReader, регистрации события “load” для него, и вызова его метода readAsText с передачей тому файла. По окончанию загрузки в свойстве result сохраняется содержимое файла.

Пример использует Array.prototype.forEach для прохода по массиву, так как в обычном цикле было бы неудобно получать нужные объекты file и reader от обработчика событий. Переменные были бы общими для всех итераций цикла.

У FileReaders также есть событие “error”, когда чтение файла не получается. Объект error будет сохранён в свойстве error. Если вы не хотите забивать голову ещё одной неудобной асинхронной схемой, вы можете обернуть её в обещание (см. главу 17):

Возможно читать только часть файла, вызывая slice и передавая результат (т.н. объект blob) объекту reader.

Хранение данных на стороне клиента

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

Когда такому приложению нужно сохранять информацию между сессиями, переменные JavaScript использовать не получится – их значения выбрасываются каждый раз при закрытии страницы. Можно было бы настроить сервер, подсоединить его к интернету и тогда приложение хранило бы ваши данные там. Это мы разберём в главе 20. Но это добавляет вам работы и сложности. Иногда достаточно хранить данные в своём браузере. Но как?

Можно хранить строковые данные так, что они переживут перезагрузку страниц — для этого надо положить их в объект localStorage. Он разрешает хранить строковые данные под именами (которые тоже являются строками), как в этом примере:

Переменная в localStorage хранится, пока её не перезапишут, удаляется при помощи removeItem или очисткой локального хранилища пользователем.

У сайтов с разных доменов – разные отделения в этом хранилище. То есть, данные, сохранённые с вебсайта в localStorage, могут быть прочтены или перезаписаны только скриптами с этого же сайта.

Также браузеры ограничивают объём хранимых данных, обычно в несколько мегабайт. Это ограничение, вкупе с тем фактом, что забивание жёстких дисков у людей не приносит прибыли, предотвращает отъедание места на диске.

Следующий код реализует простую программу для ведения заметок. Она хранит заметки в виде объекта, ассоциируя заголовки с содержимым. Он кодируется в JSON и хранится в localStorage. Пользователь может выбрать записку через поле

Скрипт инициализирует переменную notes значением из localStorage, а если его там нет – простым объектом с одной записью «что купить». Попытка прочесть отсутствующее поле из localStorage вернёт null. Передав null в JSON.parse, мы получим null обратно. Поэтому для значения по умолчанию можно использовать оператор || .

Когда данные в note меняются (добавляется новая запись или меняется текущая), для обновления хранимого поля вызывается функция saveToStorage. Если б мы рассчитывали, что у нас будут храниться тысячи записей, это было бы слишком накладно, и нам пришлось бы придумать более сложную процедуру для хранения – например, своё поле для каждой записи.

Когда пользователь добавляет запись, код должен обновить текстовое поле, хотя у поля и есть обработчик “change”. Это нужно потому, что событие “change” происходит, только когда пользователь меняет значение поля, а не когда это делает скрипт.

Есть ещё один похожий на localStorage объект под названием sessionStorage. Разница между ними в том, что содержимое sessionStorage забывается по окончанию сессии, что для большинства браузеров означает момент закрытия.

HTML предоставляет множество различных типов полей формы – текстовые, галочки, множественного выбора, выбора файла.

Из JavaScript можно получать значение и манипулировать этими полями. По изменению они запускают событие “change”, по вводу с клавиатуры – “input”, и ещё много разных клавиатурных событий. Они помогают нам отловить момент, когда пользователь взаимодействует с полем ввода. Свойства вроде value (для текстовых полей и select) или checked (для галочек и радиокнопок) используются для чтения и записи содержимого полей.

При передаче формы происходит событие “submit”. Обработчик JavaScript затем может вызвать preventDefault этого события, чтобы остановить передачу данных. Элементы формы не обязаны быть заключены в теги

Илон Маск рекомендует:  Iis справочник администратора
Автодополнение

Дополните текстовое поле так, что при вводе текста под ним появлялся бы список вариантов. У вас есть массив возможных вариантов, и показывать нужно те из них, которые начинаются с вводимого текста. Когда пользователь щёлкает по предложенному варианту, он меняет содержимое поля на него.

Игра «Жизнь» Конвея

Это простая симуляция жизни на прямоугольной решётке, каждый элемент которой живой или нет. Каждое поколение (шаг игры) применяются следующие правила:

— каждая живая клетка, количество соседей которой меньше двух или больше трёх, погибает
— каждая живая клетка, у которой от двух до трёх соседей, живёт до следующего хода
— каждая мёртвая клетка, у которой есть ровно три соседа, оживает

Соседи клетки – это все соседние с ней клетки по горизонтали, вертикали и диагонали, всего 8 штук.

Обратите внимание, что правила применяются ко всей решётке одновременно, а не к каждой из клеток по очереди. То есть, подсчёт количества соседей происходит в один момент перед следующим шагом, и изменения, происходящие на соседних клетках, не влияют на новое состояние клетки.

ООП в JavaScript. Лабораторная работа 3
Форма, кнопка, текстовое поле

Вернемся к самому первому примеру:

Это пример использования формы , которая содержит такие элементы как текстовое поле и кнопку. Формы предназначены для создания интерактивных страниц, т.е. страниц, позволяющих посетителю сайта ввести некую информацию. Как, например, в данном случае свое имя.

Формы размещаются в web-документе с помощью тега . Ввести элементы формы и определить их свойства можно с помощью тега . В общем виде код для ввода элемента формы выглядит следующим образом:

Ключевое слово type определяет тип объекта (text — текстовое поле, button — кнопка и т.п.),
ключевое слово id задает имя-идентификатор объекта формы, также как и ключевое слово name ;
value — текст, отображаемый в (на) объекте (одно из свойств объекта).

Обратите внимание, что объект форма сам обладает параметрами id и name .

Параметры id и name идентичны, но некоторые браузеры воспринимают только id , другие только name , поэтому рекомендуется оставлять оба этих параметра с одинаковыми значениями.

Виды элементов форм:

1) текстовое поле

Однострочное текстовое поле. Используется для ввода простейшей информации: имена, адреса и пр. Выглядит так:

«text» > «Text1» size= «30» value= «Начальное значение поля» / >

Результат — на web-странице появляется следующий объект:

2) кнопка

Кнопка — это область окна, которая реагирует на щелчки мыши. Элемент кнопка вводится следующим образом:

«button» > «button1» value= «Нажми меня!» />

Данным кодом мы вводим кнопку с надписью «Нажми меня!», однако при ее нажатие ничего не произойдет, так как любую желаемую реакцию интерфейса нужно программировать. Т.е. нужно ввести событие нажатие на кнопку onmousedown и написать что должно при этом произойти. например измениться свойство кнопки value .

«button» > «button2» value= «Нажми меня!» onmousedown= «this.value=’ну нажми еще раз. ‘ » />

В результате получим следующее:

Часто необходимо, чтобы при нажатии кнопки появлялось на экране диалоговое окно. Для этого можно использовать метод alert():

«button» > «button3» value= «Нажмите кнопку » onmousedown= «alert(‘Добро пожаловать!’)» />

В примере 1 необходимо было изменить текст в текстовом поле, т.е. изменить свойство объекта текстовое поле. Для изменения свойства любого объекта необходимо записать следующее:

объект.свойство=»новое значение свойства»

Но как обратиться к объекту текстовое поле? Для обращения к объекту формы служит id ( идентификатор объекта). Т.е. если мы задали id объекта — Text1, то следующая запись должна изменить его свойство — к старому тексту содержащемуся в объекте слева и справа будет добавлен текст «Здравствуйте» и «!»соответственно:

Но такое обращение к объекту можно использовать только в пределах одной формы, т.е. если объект текстовое поле и кнопка, содержатся внутри одного тега ! A если текстовое поле содержится в другой форме, то нужно соблюдать иерархию объектов. Т.е. сначала нужно обратится к объекту форма, а уже затем к объекту текстовое поле:

объект.вложенный объект.свойство вложенного объекта=»новое значение свойства»

А если необходимо создать отдельную функцию для изменения свойства объекта, то оба вышеприведенных варианта будут работать только в Internet Explorer, так как только этот браузер поддерживает прямое обращение к объекту

Только для Internet Explorer.

Для остальных браузеров, для того чтобы обратиться к элементу, нужно воспользоваться методом getElementById() объекта document :

Задание №1

1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Создайте код для примера №1 всеми описанными выше способами.

Другие объекты формы

элемент

text

Однострочное поле ввода текста (принято по умолчанию). Атрибут value задает начальное значение текста, size — размер поля ввода в символах, а maxlength — максимально возможное количество символов в данном поле. Атрибут readonly запрещает изменение текста поля.

password

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

checkbox

Флажок. Атрибут value задает значение этого элемента, когда он выбран, а атрибут checked — выбран ли первоначально.

radio

Переключатель. Атрибут value задает значение этого элемента, когда он выбран, а атрибут checked — выбран ли первоначально.

reset

Кнопка сброса формы. Необязательный атрибут value перекрывает текст кнопки, принятый по умолчанию.

submit

Кнопка пересылки формы. Необязательный атрибут value перекрывает текст кнопки, принятый по умолчанию. Если форма содержит несколько таких кнопок, то атрибут name используется для передачи имени кнопки обработчику формы, что позволяет последнему осуществлять различные действия в зависимости от того, какая из кнопок пересылки формы была нажата.

image

Графическая кнопка пересылки формы. Атрибут src задает URI графического образа кнопки, а alt — альтернативный текст надписи на кнопке. При щелчке мышью по такой кнопке происходит пересылка формы, причем координаты щелчка мыши передаются серверу в виде name.x=x-value и name.y=y-value, где name — имя кнопки, а x-value и y-value — координаты в пикселях относительно верхнего левого угла образа. Атрибут usemap указывает на клиентскую карту ссылок и его значением должно быть имя закладки, заданное атрибутом name соответствующего элемента MAP. Атрибут ismap указывает на серверную карту ссылок.

button

Кнопка общего вида. Атрибут value задает текст кнопки, а атрибут onclick должен задавать сценарий, вызываемый при нажатии этой кнопки.

Селектор файлов. Атрибут value задает начальное имя файла, но обозреватели обычно игнорируют его из соображений безопасности. Необязательный атрибут accept задает список типов файлов, разделенных запятыми, которые поддерживаются сервером обработчика формы. Этот список может использоваться для отфильтровки только допустимых файлов, но современные обозреватели обычно игнорируют этот атрибут. Форма, содержащая селектор файлов, должна иметь атрибуты method=post и enctype=»multipart/form-data».

HTML JavaScript

В современном мире верстальщику, который не знает хотя бы основ JavaScript, будет очень сложно. Совершенно не обязательно быть гуру JavaScript, но основами данного языка владеть необходимо.
JavaScript — клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере).
JavaScript используется для создания веб-приложений и динамических сайтов способных взаимодействовать с пользователем. В этом уроке вы получите лишь общее представление об этом мощном инструменте веб-дизайна, т.к. изучение JavaScript не входит в начальный курс обучения HTML.
Прежде всего нужно запомнить, что JavaScript является регистрозависимым языком. По этой причине следует запоминать не только названия свойств, методов или ключевых слов JavaScript, но и заглавными или строчными буквами они пишутся.

Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.

Для записи JavaScript-кода в HTML-документе используется тег

В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:

Запуск скрипта

В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:

Подключение внешнего скрипта

Если предполагается использовать один и тот же сценарий на многих веб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода веб-страницы.
JavaScript-код можно записать в отдельном файле с расширением .js , после чего подключать его к HTML-документу примерно так, как мы делали это с CSS-файлами.
Файл с расширением .js является обычными текстовым файлом, как и другие уже известные нам файлы с расширениями: .css и .html .
Создадим файл script.js и сохраним в нем небольшую функцию, созданную с помощью Javascript:

Для подключения JS-файлов также используется тег

Несколько простых примеров onclick на языке javascript. Настраиваем свои собственные события

Приветствую всех, кто желает разобраться в функционировании onclick (). Сегодняшняя статья поможет вам раз и навсегда понять принцип работы данного обработчика событий и разобрать конкретный пример onclick JavaScript, а точнее примеры.

Я покажу вам несколько способов работы с данным инструментом, объясню в чем их преимущества и недостатки, а также опишу работу jQuery с событиями. А теперь перейдем к разбору материала!

Назначение обработчиков событий

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

По правилам написания все обработчики включают в свое название «on+наименование события», что и соблюдено в onclick (). В зависимости от выбранного события обработка будет происходить вследствие разных действий. В нашем случае при использовании onclick () будут выполняться только те event-ы, которые были вызваны левым кликом мышки.

Различные способы назначения событийного обработчика

На сегодняшний день существует несколько вариантов внедрения в код обработчика некого или неких событий.

Использование простых событий

Начнем с простого варианта, который заключается во внедрении onclick () в саму разметку html-документа. Выглядит это следующим образом:

CSS Buttons

Узнайте, как стиль кнопок с помощью CSS.

Основные стили кнопок

Кнопка по умолчанию Кнопка CSS

Пример

Цвета кнопок

Используйте свойство background-color для изменения цвета фона кнопки:

Пример

Размеры кнопок

Используйте свойство font-size для изменения размера шрифта кнопки:

Пример

Используйте свойство padding для изменения заполнения кнопки:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Пример

Закругленные кнопки

Используйте свойство border-radius для добавления скругленных углов к кнопке:

Пример

Цветные границы кнопок

Используйте свойство border , чтобы добавить цветную рамку к кнопке:

Пример

Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.

Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:

Пример

.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>

.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.

Кнопки теней

Use the box-shadow property to add shadows to a button:

Пример

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover <
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Отключенные кнопки

Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).

Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:

Пример

Ширина кнопки

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

Пример

Группы кнопок

Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:

Пример

Группа кнопок на границе

Используйте свойство border для создания группы кнопок с рамками:

Пример

Вертикальная группа кнопок

Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL