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

html — Сделать кнопку и input на всю ширину контейнера

Вопрос задан 2 года 2 месяца назад

Изменён 2 года 2 месяца назад

Просмотрен 533 раза

У меня у input'a и у button'a задан:

width: 100%;

но почему то button меньше чем input:

• html
• css
• вёрстка

5

У таких «сложных» элементов как input и button стоит обнулять дефолтные стили перед тем как приступать к дизайну, это поможет избежать «неожиданностей» впоследствии:

input {
  display: block;
  width: 100%;
  height: auto;
  font: inherit;
  letter-spacing: unset;
  word-spacing: unset;
  line-height: 1;
  text-shadow: none;
  text-align: unset;
  writing-mode: unset;
  text-rendering: unset;
  text-indent: 0;
  color: inherit;
  text-transform: none;
  background-color: unset;
  padding: 0;
  border: 1px solid;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
  margin: 0;
  appearance: none;
  cursor: default;
}
button {
  display: block;
  width: 100%;
  align-items: unset;
  font: inherit;
  font-variant-caps: unset;
  font-style: normal;
  font-weight: normal;
  font-variant-ligatures: unset;
  font-variant-numeric: unset;
  font-variant-east-asian: unset;
  font-stretch: unset;
  letter-spacing: unset;
  word-spacing: unset;
  line-height: 1;
  text-shadow: none;
  text-align: unset;
  writing-mode: unset;
  text-rendering: unset;
  text-indent: 0;
  color: inherit;
  text-decoration: none;
  text-transform: none;
  background-color: unset;
  padding: 0;
  border: 1px solid;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
  margin: 0;
  appearance: none;
  cursor: pointer;
}

<input placeholder="Например: Москва, Россия" />
<button>Узнать погоду</button>

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

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Отправка формы | HTML | CodeBasics

Последним шагом в создании формы является добавление кнопки для отправки результата на сервер. Для этого, используя парный тег <button>, создадим кнопку отправки:

<form>
  <button>Отправить</button>
</form>

После нажатия на кнопку «Отправить», данные будут переданы обработчику, который указан в атрибуте action (если не указан, то данные отправятся на эту же страницу). После отправки данных страница будет перезагружена.

Теперь, используя элементы форм из прошлых уроков, создадим форму с разными полями.

<h3>Форма поиска</h3>
<form>
  <label>
    Введите ваш запрос
    <input type="search">
  </label>
  <br>
  <select>
    <option disabled>В каком разделе искать?</option>
    <option>JS</option>
    <option>HTML</option>
    <option>CSS</option>
  </select>
  <button>Искать</button>
</form>

Форма поиска

Введите ваш запрос В каком разделе искать?JSHTMLCSS

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

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы расположите следующие элементы:

• 2 текстовых поля <input>
• Список с возможностью множественного выбора
• Кнопку «Отправить»

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

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

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

← Предыдущий

Следующий →

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

✨ Кнопки обмена HTML — Грегори Шир

22 октября 2014 г.

• 3 минуты чтения • 980 голосов

Сегодня мы собираемся сделать несколько кнопок социальных сетей только для HTML, таких как показанные ниже. Правильно, JavaScript не требуется! 🧙‍♀️

Твиттер Фейсбук Реддит Хакер Новости LinkedIn Электронная почта

⚠️ Не видите? Попробуйте отключить блокировщик рекламы.

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

Фу . Мало того, многие также устанавливают сторонние отслеживающие файлы cookie, которые нарушают конфиденциальность читателя.

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

🔗 Полный исходный код можно скачать на GitHub

Все, что вам нужно, — это простая якорная бирка

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

Вот базовая разметка для Twitter, Google Plus, Facebook, StumbleUpon, Reddit, LinkedIn и Ссылки на рассылку по электронной почте:

 


    Твиттер



    Фейсбук

 

    Реддит


 ycombinator.com/submitlink?u=&t=