Как в html сделать кнопку: Как добавить HTML-кнопку на сайт

HTML кнопка, как ссылка и ссылка, как кнопка

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

Итак, приступим.

Внимание:
В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «https://bloggood.ru/». Естественно, вам нужно заменить эти адреса своими.

HTML кнопка как ссылка

 1  способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:

<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET">
<input ENGINE="submit" value="Кнопка" />
</form>

2 способ:
Также можно использовать HTML события:

<input value="Кнопка" type="button" />

3 способ:
Тоже взят из HTML события, только другим способом:

JS:

<script type="text/javascript">
function BlogGood()
{
location.href='https://bloggood.ru/';
}
</script>

HTML:

<input value="Кнопка" type="button" />

BlogGood() – это название функции вы можете назвать по своему.

HTML ссылка как кнопка

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1  способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:

<a href=" ВАША_ССЫЛКА_НА_СТРАНИЦУ "><img src="knopka.jpeg"></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

CSS:

a
{
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
padding: .2em .75em;
text-decoration: none;
}

HTML:

<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

3 способ:

Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:

CSS:

.ssilka {
border:1px solid #ccc; // рамка
background:#eaeaea; //фон
padding: .2em .75em; //отступы внутри
text-decoration: none; //убрать подчеркивание ссылки
}

HTML:

<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

Вроде, ничего не пропустил и ничего не напутал.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

html — Как сделать кнопку по центру?

inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block. Ибо ему просто некуда двигаться. Размеры-то одинаковые.

Если div шире своего содержимого, то text-align работает.
Но Ваш кнопочный div, когда он нормальный block, растягивается по длине на всю ширину страницы. Поэтому кнопка выравнивается относительно страницы и уезжает правее относительно центра текста.

Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block. Он не будет шире текста (предполагаем текст шире кнопки), кнопочный div таким образом тоже по ширине будет как текст, и кнопка теперь выравнивается относительно текста.

.section > div {
  display: inline-block;
}

.button {
  text-align: center;
}

.button > a {
  color: #39739d;
  background-color: #E1ECF4;
  border: 1px solid #96bdd9; 
  padding: 5px; 
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f4f8fb;
  text-decoration: none;
}

.button > a:hover {
  background-color: #bcd4e6;
}

<div>
  <div>
    <h3>We are specialist in</h3>
    <h2>Responsive designs, Stationary<br>And wordpress Themes</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem                     Ipsum has been the industry's standard dummy text.
    </p>
    <div>
      <a href="#">Button Name</a>
    </div>
  </div>
</div>

Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.

Формы HTML (Часть 2). В данном разделе рассмотрим формы. | by Влад Скуришин

Формы используются для сбора и заполнения информации на сайте.

Например: оставить заявку с номером телефона и email’ом.

Или еще один всем известный пример: каждый раз, когда мы заходим в Google или Yandex, мы видим на странице поисковика форму.

При вводе запроса в данную форму и нажатии на кнопку (или Enter), выполняется HTTP-запрос на сторону сервера Goggle или Yandex. Данный сервер обрабатывает полученные данные и выдает соответствующие ссылки на странице (см. рисунок выше).

Каким образом нам создать форму?

Для этого существует тег form.

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

Атрибут action указывает url, по которому будет выполняться обработка запроса. method указывает способ передачи данных.

• GET — обычно используется для получения данных и передает параметры с помощью параметров в uri.
• POST — используется для отправки данных и сохранения в базу данных (особенно приватной информации). Передаваемые параметры не видны в uri

Советуем вам больше узнать о методах по данной ссылке: клик.

Чтобы добавить в форму текстовое поля, мы можем воспользоваться тегом input.

Результат:

Атрибут type используется для указания типа вводимых данных. В нашем примере — это текст (text) и число (number).

Кроме text и number существуют следующие типы:

• password — используется для ввода пароля,
• url — для ввода url,
• email — для ввода email,
• file — для отправки файла,
• checkbox — для добавления флажка,
• radio — для добавления переключателя.

Список остальных типов вы можете найти тут.

Атрибут name указывает имя параметра, который будет передавать обработчику на backend при нажатии на кнопку «Отправить».

placeholder — задает текст, отображаемый до заполнения. Обычно оно используется для подсказки.

Ну и value, с помощью которого мы можем задать начальное значение введенное в поле. В нашем примере мы установили значение Человек.

Больше информации о атрибутах вы можете найти вотут.

В примере у нас есть текстовое поле race. Но нигде не указано подсказки, что это за поле. Пользователь просто не поймет, что все это значит.

Для добавления надписи мы можем воспользоваться тегом label. Дополнительно сгруппируем их с помощью тега fieldset и добавим группе название legend.

Результат:

Основная информация Введите свою расу

Атрибут for указывает к какому input привязана данная надпись по id.

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

Атрибут value в данном случае — это значение, которое будет доставлено на сервер при отправке. Если value не задан, то берется текст внутри option.

Результат:

Выберите свой город: Москва Санкт-Петербург Калининград Омск Казань

Мы создали свою форму, но как отправить данные к обработчику?

Нам необходима кнопка!

Тег button используется для создания кнопки.

Не забудьте указать type="submit". submit указывает, что при нажатии на данную кнопку, произойдет отправка к обработчику.

Остальную часть тегов вы можете найти тут.

Кнопка

Кнопку можно задать с помощью парного тега <button>…</button>. Внутри элемента button можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком.

Атрибуты тега <button>

autofocus

Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:

<button autofocus>...</button>
<button autofocus="">...</button>
<button autofocus="autofocus">...</button>

disabled

Блокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий. Значение можно задать тремя способами:

<button disabled>...</button>
<button disabled="">...</button>
<button disabled="disabled">...</button>

form

Идентификатор формы, к которой относится кнопка.

formaction

Адрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега <form> указан атрибут action, то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit.

formenctype

Способ кодирования данных формы. Используется только для кнопок типа submit. Возможные значения:

• application/x-www-form-urlencoded – Символы кодируются перед отправкой (значение по умолчанию).
• multipart/form-data – Символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
• text/plain – пробелы преобразуются в символ «+», символы не кодируются.

formmethod

Метод пересылки данных формы. Используется только для кнопок типа submit. Возможные значения:

• get – данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение,
• post – данные формы передаются отдельно, как HTTP.

Если для тега <form> указан атрибут method, то атрибут formmethod переопределяет его значение.

formnovalidate

Отмена проверки формы на корректность. Используется только для кнопок типа submit. Значение можно задать тремя способами:

<button formnovalidate>...</button>
<button formnovalidate="">...</button>
<button formnovalidate="formnovalidate">...</button>

formtarget

Место, где будет отображен результат отправки формы. Используется только для кнопок типа submit. Возможные значения:

• _blank – В новом окне или вкладке,
• _self – В текущем окне (по умолчанию),
• _parent – В родительском фрейме (если фреймов нет, то это значение работает как _self),
• _top – В полном окне браузера, отменяя все фреймы (если фреймов нет, то это значение работает как _self),
• имя_фрейма – В iframe с указанным именем.

name

Имя кнопки.

type

Тип кнопки. Возможные значения:

• button – Просто кнопка (по умолчанию),
• submit – Кнопка завершения работы и передачи данных,
• reset – Кнопка сброса.

value

Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Для тега <button> также доступны общие атрибуты и атрибуты обработки событий.

Можно вместо текста вставить рисунок, если вам это необходимо.

Пример кнопки с рисунком

<button>
    Кто это?<br>
    <img src="be.gif" alt="Людвиг ван Бетховен">
</button>

РЕЗУЛЬТАТ:

html — Как разместить кнопки входа и регистрации рядом? … Я хочу, чтобы кнопка регистрации указывала на register.php HTML / CSS

Вы, должно быть, забыли установить пакет значков material-ui. Попробуйте следующее:…

Я попытался создать кнопку регистрации с элементом, но, похоже, это не работает. Если я попробую поставить display: inline; он не помещает две кнопки рядом.

*{
    font-family: 'Montserrat', sans-serif;

}

body,
html{
    margin: 0px;
    padding: 0px;
    background-color: #0E0E0E;
}

.login-box{
    background-color: #010100;
    width: 400px;
    height: 388px;
    margin: 250px auto;
}

.login-box h2{
    color: #FFFFFF;
    margin:0px 35px;
    margin-bottom: 35px;
    padding-top: 25px;
}

.login-box form input{
    display: block;
    width: 324px;
    height: 50px;
    margin-left: 35px;
    margin-right: 41px;
    margin-bottom: 24px;
}

#submit{
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}

#pwdreset{
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    margin: 20px 0px;
    margin-left: 225px;
}

#register-button {
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="signin.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div>

            <h2>Login</h2>

            <form action="login.php" method="post">
                <input type="text" name="username" placeholder="Email" >
                <input type="password" name="password" placeholder="Password">
                <a href="#">Forgot password?</a>
                <input type="submit" name="submit" value="Login">
            </form>

            <form action="https://www.w3docs.com/">
                <input type="submit" name="register" value="Register">
            </form>

        </div>

    </body>


</html>

0

Tomáš Hanečák 17 Окт 2020 в 21:39

5 ответов

Лучший ответ

Вы этого хотите?

* {
  font-family: 'Montserrat', sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0E0E0E;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
  position: relative;
}

.login-box h2 {
  color: #FFFFFF;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

#pwdreset {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<div>

  <h2>Login</h2>

  <form action="login.php" method="post">
    <input type="text" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <a href="#">Forgot password?</a>
    <input type="submit" name="submit" value="Login">
  </form>

  <form action="https://www.w3docs.com/">
    <input type="submit" name="register" value="Register">
  </form>

</div>

0

Pranav Rustagi 17 Окт 2020 в 19:04

Используйте атрибут formaction , поместите две кнопки в ту же форму, как показано ниже.
Это HTML5, в IE работает на версии 10 и выше.

    <form action="login.php" method="post">
        <input type="text" name="username" placeholder="Email" >
        <input type="password" name="password" placeholder="Password">
        <a href="#">Forgot password?</a>
        <input type="submit" name="submit" value="Login">
        <input formaction="/register.php" type="submit" name="register" value="Register" >
    </form>            
    

0

Ivo Gjorgjievski 17 Окт 2020 в 19:01

Здесь вы можете обернуть свою вторую форму и кнопку в первой форме в новый div со стилем отображения flex, и у вас будут расположенные рядом кнопки.

* {
  font-family: "Montserrat", sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0e0e0e;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
}

.login-box h2 {
  color: #ffffff;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

#pwdreset {
  display: block;
  color: #ffffff;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

.submits {
  display: flex;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div>

            <h2>Login</h2>

            <form action="login.php" method="post">
                <input type="text" name="username" placeholder="Email" >
                <input type="password" name="password" placeholder="Password">
                <a href="#">Forgot password?</a>
                <div>

                  <input type="submit" name="submit" value="Login">
                  <form action="https://www.w3docs.com/">
                    <input type="submit" name="register" value="Register">
                </form>
                </div>
            </form>

            

        </div>

    </body>


</html>

0

ali nazari 17 Окт 2020 в 19:03

Обратитесь к этой ссылке, чтобы отобразить две встроенные формы. http://stackoverflow.com/questions/7438676/get-two-forms-to-display-inline/7438709

0

Naman Jain 17 Окт 2020 в 19:07

Я бы посоветовал добавить в класс position: relative;: .login-box.

Вы этого хотите?…

.form-2{
  position:absolute;
  bottom: 0;
  right:0;
}

0

MaxiGui 17 Окт 2020 в 19:03

Как создать текстовые кнопки

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

Успех Информация Предупреждение Опасность Дефолт

Как стилизовать текстовые кнопки

Шаг 1) Добавьте HTML:

Пример

Успех
Информация
Предупреждение
Опасно
По умолчанию

Шаг 2) Добавьте CSS:

Чтобы получить вид «текстовой кнопки», мы удалили цвет фона и границу по умолчанию:

Пример

/ * При наведении курсора мыши * /
.btn: hover {background: #eee;}

.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

Текстовые кнопки с индивидуальным фоном

Текстовые кнопки с определенным цветом фона при наведении:

Пример

/ * Зеленый * /
. Успех {
цвет: зеленый;
}

. Успех: завис {
цвет фона: # 04AA6D;
цвет: белый;
}

/ * Синий * /
.info {
цвет: голубой;
}

.info: hover {
background: # 2196F3;
цвет: белый;
}

/ * Оранжевый * /
.предупреждение {
цвет: апельсин;
}

. Предупреждение: наведение {
фон: # ff9800;
цвет: белый;
}

/ * Красный * /
.danger {
цвет: красный;
}

. Опасность: парение {
фон: # f44336;
цвет: белый;
}

/ * Серый * /
. По умолчанию {
цвет: черный;
}

. По умолчанию: hover {
background: # e7e7e7;
}

Перейдите к нашему руководству по кнопкам CSS, чтобы узнать подробнее о стилизации кнопок.

Как добавить кнопку HTML, которая действует как ссылка

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

Добавить встроенное событие onclick¶

Вы можете добавить встроенное событие onclick в тег .

Это может не сработать, если кнопка находится внутри элемента

.

Пример добавления события onclick в тег

: ¶

  

  
    
  
  
    <кнопка>
      Кликните сюда
    

Попробуйте сами »

Также можно добавить встроенное событие onclick в тег внутри элемента.

Пример добавления события onclick в тег

  

  
    
  
  
    <форма>
      
    
  
  

Используйте атрибут action или formaction.

Другой способ создания кнопки, которая действует как ссылка, — это использование атрибута action или formaction внутри элемента

  

   
      
   
   
      
          Нажми меня 
      
   
  

Чтобы открыть ссылку в новой вкладке, добавьте target =" _ blank ".

Пример открытия ссылки с кнопки в новом окне: ¶

  

   
      
   
   
      

          Нажми меня 
      
   
  

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

Пример создания кнопки, действующей как ссылка с атрибутом formaction: ¶

  

   
      
   
   
      <форма>
          Нажми меня 
      
   
  

Стиль ссылки как кнопки¶

Добавьте ссылку в стиле кнопки со свойствами CSS. Атрибут href является обязательным атрибутом тега . Он определяет ссылку на веб-странице или место на той же странице, по которому пользователь переходит после нажатия на ссылку.

Пример стилизации ссылки как кнопки с помощью CSS: ¶

  

  
    
    <стиль>
      .кнопка {
        цвет фона: # 1c87c9;
        граница: нет;
        белый цвет;
        отступ: 20 пикселей 34 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        дисплей: встроенный блок;
        размер шрифта: 20 пикселей;
        маржа: 4px 2px;
        курсор: указатель;
      }
    
  
  
    Нажмите здесь 
  
  

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

Рассмотрим еще один пример.

Пример оформления ссылки как кнопки: ¶

  

  
    
    <стиль>
      .кнопка {
        дисплей: встроенный блок;
        отступ: 10 пикселей 20 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        цвет: #ffffff;
        цвет фона: # 7aa8b7;
        радиус границы: 6 пикселей;
        наброски: нет;
      }
    
  
  
     Тег кнопки HTML 
  
  

Как создать радиокнопки в HTML [+ примеры]

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

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

Удобно, что HTML имеет встроенный тип ввода для переключателей, и реализовать их на странице довольно просто. Здесь мы рассмотрим, что такое переключатели, когда их использовать и как кодировать форму с переключателями в HTML.

Что такое радио-кнопка HTML?

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

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

Радиокнопки и флажки

Радиокнопки похожи на другой распространенный интерактивный элемент — флажок. Различия между ними невелики, но важно отметить: в то время как переключатели позволяют пользователям выбирать только один вариант для каждой группы, флажки позволяют пользователям выбирать (или «отмечать») один, несколько или ни одного варианта для каждой группы.Пользователи также могут снять флажок, щелкнув его — переключатели не позволяют этого.

Признаюсь, это не самая захватывающая тема. Однако их смешение может вызвать у посетителей серьезное недоумение. Поэтому обязательно используйте радиокнопки для меню «Выбрать одно» и сохраните флажки для меню «Выбрать все подходящие» или своих одноразовых вопросов (например, «Установите этот флажок, если…»).

Теперь, когда мы понимаем назначение переключателей HTML, давайте узнаем, как их создавать.

Как сделать радиокнопку в HTML

Чтобы создать переключатель в HTML, используйте элемент с типом radio .Это создает единственную радиокнопку, с которой пользователи могут взаимодействовать:

См. Радиокнопку Pen Single от Кристины Перриконе (@hubspot) на CodePen.

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

См. Группу переключателей пера Кристины Перриконе (@hubspot) на CodePen.

Здесь у нас есть три элемента типа radio с некоторыми новыми атрибутами.Также есть новый элемент для каждого . Давайте рассмотрим все, что мы добавили в код.

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

Как уже упоминалось, переключатели располагаются группами. Используйте обязательный атрибут name , чтобы сгруппировать набор связанных переключателей.В приведенном выше примере все имеют одно и то же значение для name , поэтому они рассматриваются как часть одной группы. Это позволяет пользователям выбирать только один вариант в группе за раз — попробуйте его выше.

Затем значение Атрибут представляет уникальное значение для переключателя. Пользователи его не видят, но отправлено для представления выбранной опции. Например, если форма выше была отправлена ​​с выбранным элементом «17 лет или моложе», система, обрабатывающая форму, получит значение age = child .Если пользователь не выберет какой-либо переключатель, значение не будет отправлено. Если для выбранной опции отсутствует значение значение атрибута , форма отправит значение по умолчанию на .

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

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

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

Проверяемый атрибут

У входов радиокнопок есть один дополнительный атрибут, проверил атрибут . Если включена в тег , кнопка будет выбрана по умолчанию.

См. Форму переключателя Pen с выбором по умолчанию от Кристины Перриконе (@hubspot) на CodePen.

Как разместить радиокнопки HTML в форме

Что хорошего в переключателях, если пользователи не могут отправлять свои ответы? Вот почему радиокнопки обычно находятся внутри HTML-форм. Элемент HTML

 
           Основной 
           Дополнительный 
           Успех 
           Опасно 
           Предупреждение 
           Информация 
           Светлый 
           Темный 
           Ссылка 
          

 
          
            Начальный
          
          
            Вторичный
          
          
            Успех
          
          
            Опасность
          
          
            Предупреждение
          
          
            Информация
          
          
            Свет
          
          
            Темный
          
          

 
           Основной 
           Дополнительный 
           Успех 
           Опасно 
           Предупреждение 
           Информация 
           Светлый 
           Темный 
          

 
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Начальный
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Вторичный
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Успех
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Опасность
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Предупреждение
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Информация
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Свет
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Темный
          
          

 
          
             
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
             
          
          
             
          
          
             
          
          

 
          

            <а
             
             
            >
               
            

            

              

                <а
                 
                 
                  >   
              

              

                <а
                 
                 
                  >   
              

              

                <а
                 
                 
                  >   
              

              

                <а
                 
                 
                  >   
              

            

          

          

 
            <а
             
             
              href = "#!"
              роль = "кнопка"
              >   
            

 
               Twitter 
            

 
                8  
            

 
           Кнопка 
           Кнопка 
           Кнопка 
          

 
           Первичная ссылка 
           Ссылка 
          

 
          <а
            href = "#"
           
            tabindex = "- 1"
            роль = "кнопка"
            aria-disabled = "правда"
            > Первичная ссылка 
          <а
            href = "#"
           
            tabindex = "- 1"
            роль = "кнопка"
            aria-disabled = "правда"
            > Ссылка 
          

 
          

             Кнопка 
             Кнопка 
          
          

 
          

             Кнопка 
             Кнопка 
          
          

 
          

             Кнопка 
             Кнопка 
          
          

 
          

             Кнопка 
             Кнопка 
          
          

 
           Переключить ссылку 
          <а
            href = "#"
           
            роль = "кнопка"
            data-mdb-toggle = "кнопка"
            ария-прессованный = "правда"
            > Активная ссылка переключения 
           Отключено переключение ссылки