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

html — Как добавить кнопку поверх поля для ввода?

Как добавить кнопку в строке ввода, чтобы это выглядело примерно так?

Вот мой код:

<div>
        <div>
            <h2>Search U.K. house price data</h2>
            <form>
                <label for="inputSearch">Search U.K. house price data</label>
                <input type="text" placeholder="Enter a postcode, street or address">
                <span></span>
                <button type="submit">SEARCH</button>
            </form>
        </div>
</div>

Кнопка появляется снизу.

В чём проблема? Как, вообще, примерно должен выглядеть код для всей строки?

• html
• css
• bootstrap

7

* {
  box-sizing: border-box;
}

form {
  position: relative;
  margin: 1em;
}

input {
  display: block;
  width: 100%;
  height: 3em;
  line-height: 3em;
  border-radius: 1.  5em;
  border: 1px solid;
  padding: 0 1.5em;
}

button {
  position: absolute;
  top: .4em;
  right: .4em;
  height: 2.2em;
  border-radius: 1.1em;
  border: 1px solid;
  text-transform: uppercase;
}

<form>
  <input type="text" placeholder="....">
  <button type="submit">Search</button>
</form>

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

form{
  display: inline-block;
  vertical-align: top;
  position: relative;
}
input[type="search"]{
  outline: none;
  border: 2px solid #222;
  padding: 5px 100px 5px 30px;
  display: block;
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 25px;
}
button[type="submit"]{
  position: absolute; top: 7px; right: 10px;
  z-index: 9;
  outline: none;
  border: none;
  display: inline-block;
  background: #00f;
  color: #fff;
  padding: 10px 25px;
  border-radius: 25px;
  cursor: pointer;
}
button[type="submit"]:hover{
  background: #f00;
}

<form action="#">
  <input type="search" placeholder="Text search" >
  <button type="submit">Button</button>
</form>

Вариант 1: Вы можете воспользоваться абсолютным позиционированием. Разместить кнопку поверх input с помощью z-index.

Вариант 2: Разместить кнопку справа от поля ввода, с помощью дизайна кнопки притвориться частью поля ввода.

1

Для этого существует input groups, вам надо кастомизировать button addons

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <span><i></i></span>
  <input type="text" placeholder="Enter address">
  <span>
    <button type="button">Search</button>
  </span>
</div>

3

Вот полный пример

<div>
        <form role="search">
            <div>
                <input type="text" placeholder="Search" name="srch-term">
                <div>
                    <button type="submit"><i></i></button>
                </div>
            </div>
        </form>
    </div>

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

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

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

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

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

Почта

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

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

Почта

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

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

html — как внедрить кнопку в input?

Задать вопрос

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

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

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

Есть блок поиска, в котором есть кнопка и инпут для ввода текста.

Подскажите, пожалуйста, как внедрить эту самую кнопку в input справа. Знаю, что инпуту задается position: relative, а самой кнопке position: absolute. Но как дальше не могу понять.

Приношу извинения за длинные названия классов.

.middle_content_blog_content_blocks_search_ {
  display: block;
  height: auto;
}
.middle_content_blog_content_blocks_search {
  position: sticky;
  top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 400px;
  height: fit-content;
  border: 1px solid #878787;
  box-sizing: border-box;
  border-radius: 30px;
  padding: 25px 25px 25px 25px;
  margin: 50px 0 0 0;
}
.middle_content_blog_content_blocks_search_text {
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 28px;
  color: #000000;
}
.middle_content_blog_content_blocks_search_edit {
  width: 100%;
  height: 50px;
  font-size: 16px;
  border: 1px solid #878787;
  box-sizing: border-box;
  border-radius: 30px;
  outline: none;
  padding: 0 45px 0 20px;
  margin: 15px 0 0 0;
}
.
 
  middle_content_blog_content_blocks_search_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 16px;
  color: #FFFFFF;
  background-color: #B72A20;
  cursor: pointer;
  user-select: none;
  outline: none;
  border: none;
}
.search_result_message {
  display: inline-flex;
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 16px;
  color: #159815;
  margin: 15px 0 0 0;
}

<div>
  <div>
    <div>
      Поиск
    </div>
    <input type="text" placeholder="Поиск по блогу">
    <input type="button">
    <span></span>
  </div>
</div>

• html
• css
• input
• button

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

codepen

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
form {
  position: relative;
  width: 400px;
}
input[type='text'] {
  position: relative;
  width: 100%;
  padding-right: 70px;
}
input[type='submit'] {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
}

<form>
  <input type="text">
  <input type="submit" value="Отправить">
</form>

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

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

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

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

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

Почта

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

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

Почта

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

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

Тип кнопки HTML Атрибут

❮ Тег HTML

Пример

Два элемента кнопки, которые действуют как одна кнопка отправки и одна кнопка сброса (в форме):

Метод

php» =»get»>
  Имя:
 


  Фамилия:



 

Отправить
  Reset

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

---

Определение и использование

Атрибут type определяет тип кнопки.

Совет: Всегда указывайте атрибут типа для <кнопка> элемент. Разные браузеры могут использовать разные типы по умолчанию для . <кнопка> элемент.

---

Поддержка браузера

Атрибут
тип	Да	Да	Да	Да	Да

---

Синтаксис

Значения атрибутов

Значение	Описание
кнопка	Кнопка кликабельна
отправить	Кнопка представляет собой кнопку отправки (отправляет данные формы)
сброс	Кнопка является кнопкой сброса (сбрасывает данные формы к исходным значениям)

---

❮ Тег HTML

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник по JavaScript
How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

HTML Reference

CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


3
FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Атрибут формы HTML-кнопки

❮ HTML-тег

Пример

Кнопка, расположенная вне формы (но все же являющаяся ее частью):

Первый имя:



Фамилия:
<тип ввода="текст" name="lname">

Отправить

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

---

Определение и использование

Атрибут формы определяет форму, которой принадлежит кнопка.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

---

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую атрибут.

Атрибут
форма	10,0	16,0	4,0	5.1	9,5

---

Синтаксис

Значения атрибутов

Значение	Описание
form_id	Указывает элемент формы, которому принадлежит элемент . Значение этого атрибута должно быть атрибутом id элемента в том же документе.

---

❮ Тег HTML

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3. CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


3
FORUM | О

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