css — Ошибка в верстке при написании простой формы. Кнопки и чекбокс вылетают за пределы формы

Вопрос задан

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

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

Есть простая форма

<!DOCTYPE html>
<html>
    <head>
        <title>Форма обратной связи</title>
        <style>
            body {line-height:30px; }
            form {width:300px; border:2px solid red; }
            #imya {float:right;}
            #familiya {float:right; }
            #select {float:right; }
            #thief {float:right; }
            #submit {float:right; clear:right} /* вот здесь когда див сабмита делаю выровнять по правому краю браузер выбрасывает за пределы формы */
        </style>
    </head>
    <body>
        <h2>Давайте познакомимся</h2>
        <!-- Начало формы -->
        
        <form>
        Ваше имя: <input type="text" name="imya"/><br><!-- Текстовое поле -->
        Ваша фамилия: <input type="text" name="imya"/><br><!-- Текстовое поле -->
        Кто вы?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" id ="sex_male" name="sex" checked="checked" value="0"/> <!-- Радио кнопки -->
            <span>мужчина</span> <!-- не надо оборачивать в label --> 
            <input type="radio" name="sex" value="1"/>
            <span>женщина</span><br> <!-- не надо оборачивать в label -->
        Чем занимаетесь? <select name="profession" size="1"> <!-- Выпадающий список -->
            <option value="1">школьник</option>
            <option value="2">студент</option>
            <option value="3">безработный</option>
            <option value="4">рабочий класс</option>
            <option value="5">офисный планктон</option>
            <option value="6">креативный класс</option>
            <option value="7">интеллигент</option>
            <option value="8">олигарх</option>
            </select><br>
        <textarea  name="text" cols="34" rows="10">Напишите коротко о себе:  
        </textarea><br><!-- Текст -->
        <div id ="thief">
        <span>Я не буду воровать записи курсов</span>
        <input type="checkbox" value="yes" name="agree"><br>
        </div>
        <!-- Флажок -->
        <div>
        <input type="submit" value="Послать отзыв"> <!-- Кнопка для отправки формы -->
        <input type="reset" value="Очистить форму">
        </div>
        
        </form>
        <!-- Кнопка для очистки формы -->
        <!-- Конец формы -->
    </body>
</html>
  • css
  • формы

1

Интересная задача. Верстка конечно не по стандарту мягко говоря, но вопрос — почему если задать последнему элементу float: right; все ломаеться и рамка не оборачиваеться вокруг тега form интересно. Всё, дошло — это особенность float когда элементи випадают из потока. Лечиться это так.

  body {
line-height: 30px;
  }
  form {
width: 300px;
border: 2px solid red;
  }
  #sub {
float: right;
  }
  form:after {
content: "";
display: block;
clear: both;
  }
<h2>Давайте познакомимся</h2>
<!-- Начало формы -->
<form>
  Ваше имя: <input type="text" name="imya" />
<div>
    <input type="submit" value="Послать отзыв"> <!-- Кнопка для отправки формы -->
    <input type="reset" value="Очистить форму">
    </div>
</form>

Хотя почему, именно на последнем элементе все ломаеться, так и не понял…

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

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

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

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

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

Почта

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

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

Почта

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

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

Кнопки.

HTML, XHTML и CSS на 100% Кнопки. HTML, XHTML и CSS на 100%

ВикиЧтение

HTML, XHTML и CSS на 100%
Квинт Игорь

Содержание

Кнопки

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

Чтобы создать обычную кнопку, присваиваем атрибуту type значение «button». Если надо создать кнопку, которая будет отправлять форму обработчику, устанавливаем type=»submit», а если создаем кнопку, очищающую форму, то type=»reset».

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

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

В примере из листинга 6.9 описано создание кнопок с разными надписями.

Листинг 6.9. Создание кнопок

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action=»test.php» enctype=»multipart/form-data» method=»post» name= «test» target=»_blank»>

Надпись по умолчанию:<br />

<input name=»submit» type=»submit»/><input name=»reset» type=»reset»/><br>

Заданные надписи:<br />

<input name=»submit» type=»submit» value=»Отправить»/><input name=»reset» type=»reset» value=»Очистить»/><br />

<input name=»submit» type=»submit» value=»Отправить заполненную форму»/> <input name=»reset» type=»reset» value=»Стереть все введенные данные»/><br/>

</form>

</body>

</html>

Результат обработки кода из листинга 6.

9 показан на рис. 6.3.

Рис. 6.3. Кнопки с разными надписями

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

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

Данный текст является ознакомительным фрагментом.

Кнопки

Кнопки При создании формы без кнопок не обойтись: с их помощью можно отправить, очистить или отредактировать форму. В общем, кнопки необходимы. Мы можем создавать разные кнопки, в зависимости от того, что нужно сделать с формой.Чтобы создать обычную кнопку, присваиваем

Навигационные кнопки

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

Эта панель, наряду с адресной строкой – наш главный «пульт управления». Все кнопки здесь полезны, все –

Кнопки и индикаторы QIP

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

Меню Кнопки «Office»

Меню Кнопки «Office» В самом начале урока я уже обращала ваше внимание на то, что в верхнем левом углу окна Word есть большая кнопка с логотипом Microsoft Office. Давайте нажмем ее и посмотрим, что за меню она скрывает (рис. 1.123). Рис. 1.123. Меню Кнопки

1.4. Кнопки редактора SCHEMATICS

1. 4. Кнопки редактора SCHEMATICS Рис. 1.20. Элементы управления редактора SCHEMATICSВ этом разделе рассказывается о том, какие кнопки есть в редакторе SCHEMATICS. Для каждой кнопки указывается соответствующая ей команда меню (рис. 1.20). В табл. 1.1 приводится русский перевод этих команд. В

Кнопки запуска программ

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

12.2.3. Кнопки

12.2.3. Кнопки Для создания кнопки в Ruby/GTK2 предназначен класс Gtk::Button. В простейшем случае мы задаем обработчик события clicked, которое возникает, когда пользователь щелкает по кнопке.Программа в листинге 12. 5 позволяет ввести одну строку в текстовое поле и после нажатия кнопки All

Кнопки навигации

Кнопки навигации У карманных компьютеров есть кнопки навигации, позволяющие управлять объектами на экране. Это кнопки со стрелками и кнопка ввода.Чтобы узнать, на какую кнопку нажал пользователь, нужно переопределить событие OnKeyDown. Для создания тестового приложения

Кнопки

Кнопки done: запомнить новые установки.reload file: перезагрузить текущий файл с новыми установками.cancel: отменить новые установки.default: назначить установки по

Кнопки и опции

Кнопки и опции browse: выбрать картинку.alignment: выбор расположения картинки по отношению к окружающему тексту.border: толщина (в пикселах) темной рамки вокруг картинки. hspace/vspace: горизонтальный/вертикальный сдвиг картинки (в пикселях).width/height:– левое серое окно показывает

КНОПКИ: Веселые фракталы

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

Использование кнопки Автосумма

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

Полезные кнопки

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

Как создать кнопку сброса в форме с помощью HTML?

Улучшить статью

Сохранить статью

Нравится Статья

  • Уровень сложности: Easy
  • Последнее обновление: 30 сен, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Нравится Статья

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

    Подход: Вот простой способ добавить кнопку сброса —

    • Сначала мы создаем HTML-документ, содержащий элемент
      .
    • Создайте элемент под элементом формы.
    • Используйте атрибут type с элементом .
    • Установите для атрибута типа значение «сброс».

    Синтаксис

    Пример:

    < html >

       

    < head >

         < title >

             Как создать кнопку сброса 

             в форме с использованием HTML?

         Название >

    головка >

    < BODY

  • 1069 2 < BODY
  • 1069 2 966116161111961196119611961196119611 гг. >

       

         < h2 стиль "зеленый" ; >

             GeeksforGeeks

         h2 >

       

         < h3 >

             How to Create a Reset Button 

             in форма с использованием HTML?

         h3 >

       

    90 061 0 6 2 9 0   2 < form >

             Email ID:

             < input type = "email" >

             < BR >

    < BR > Пароль:

    < Вход

    < . 0062 type = "password" >

             < br >< br >

       

             < input введите = "отправить" >

             < ввод тип "" 0062 >

         form >

    body >

       

    html >

    • Вывод:


    Нравится статья

    Сохранить статью

    Кнопка сброса HTML — javatpoint

    следующий → ← предыдущая

    Сброс — это значение атрибута type элемента