Форма HTML – пример типа ввода и кнопки отправки

1656020057 forma html – primer tipa vvoda i knopki otpravki

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

Вы можете вставлять формы на веб-сайты с HTML form элемент. Внутри элемента формы вложено несколько входных данных. Эти входы также известны как элементы управления формой.

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

В конце вы узнаете, как работают формы и сможете уверенно их создавать.

Основной синтаксис формы HTML

<form action="mywebsite.com" method="POST">
    <!--Input of any type and textareas goes in here-->
</form>

Типы ввода HTML-форм

Вы используете <input> тег для создания различных элементов управления по форме в HTML. Это встроенный элемент и принимает такие атрибуты, как type, name, minlength, maxlength, placeholder, и так дальше. Каждый из них имеет конкретные значения, которые они принимают.

The placeholder атрибут важен, поскольку он помогает пользователю понять назначение поля ввода, прежде чем что-либо вводить.

Есть 20 различных типов ввода, и мы рассмотрим их один за другим.

Введите текст

Этот тип ввода принимает значение «текст», поэтому создает одну строку для ввода текста.

<input type="text" placeholder="Enter name" />

Ввод с типом текста выглядит как на скриншоте ниже:
ввод текста

Введите пароль

Как следует из названия, ввод типа пароля создает пароль. Он автоматически невидим для пользователя, если он не управляет JavaScript.

<input type="password" placeholder="Enter your password" />

ввод пароля

Введите электронную почту

Любой вход с типом электронной почты определяет поле для ввода адреса электронной почты.

<input type="email" placeholder="Enter your email" />

типEmail

Тип номер

Этот тип ввода позволяет пользователю вставлять только числа.

<input type="number" placeholder="Enter a number" />

numberInput

Введите Радио

Иногда пользователям следует выбрать один из многочисленных вариантов. Поле ввода с атрибутами типа «Радио» позволяет это сделать.

 <input type="radio" />

типРадио

Введите флажок

Таким образом, с типом входа радио пользователям будет разрешено выбрать один из многочисленных вариантов. Что делать, если вы хотите, чтобы они выбрали как можно больше вариантов? Это то, на что устанавливается вход с атрибутом типа checkbox делает.

<input type="checkbox" />

введите флажок

Введите Отправить

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

<input type="submit" value="Enter to Win" />

typeSubmit

Кнопка типа

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

<input type="button" value="Submit" />

typeButton

Введите файл

Это определяет поле для представления файла. Когда пользователь щелкнет его, ему будет предложено вставить нужный тип файла, которым могут быть изображения, PDF, файл документа и т.д.

<input type="file" />

Результат типа ввода файла выглядит следующим образом:

ввод файла

Тип Цвет

Это модный тип ввода, представленный HTML5. С его помощью пользователь может представить, например, свой любимый цвет. Черный (#000000) является по умолчанию значением, но его можно изменить, установив значение нужного цвета.

Многие разработчики использовали это в качестве трюка, чтобы выбрать различные цветовые оттенки, доступные в RGB, HSL и буквенно-цифровых форматах.

<input type="color" />

Это результат типа цветового ввода:

colorInput

Введите Поиск

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

<input type="search" />

typeSearch

Введите URL-адрес

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

<input type="url" />

введите URL-адрес

Тип Тел

Тип ввода тел позволяет собирать телефонные номера пользователей.

<input type="tel" />

типТел

Введите Дата

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

<input type="date" />

Вот как выглядит ввод с типом даты:

dateInput

Введите Datetime-local

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

<input type="datetime-local" />

datelocalInput

Тип Неделя

Тип ввода недели позволяет пользователю выбрать определенную неделю.

<input type="week" />

weekInput

Введите луну

Введенный тип месяца заполняет месяцы, которые пользователь может выбрать по нажатию.

<input type="month" />

месяц Вход

Текстовая область

Бывают случаи, когда пользователю нужно будет заполнить несколько строк текста, не подходящих для типа ввода текста (поскольку он определяет однострочное текстовое поле).

textarea позволяет пользователю делать это, поскольку он определяет несколько строк для ввода текста. Он имеет свои собственные атрибуты, такие как cols – для количества столбцов, и rows за количество строк.

<textarea cols="50" rows="20"></textarea>

текстовая область

Поле выбора нескольких

Это как переключатель и флажок в одном пакете. Он встроен в страницу с двумя элементами – a select элемент и an optionне всегда вложен внутри select.

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

<select>
      <option value="HTML">Select a Language</option>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
      <option value="React">React</option>
</select>

выберите Демо

Как определить входные данные HTML

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

<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />

labelDemo

Как работают HTML-формы

Когда пользователь заполняет форму и отправляет ее с помощью кнопки «Отправить», данные в элементах управления по форме отправляются на сервер через GET или POST Способы HTTP-запроса.

Итак, как сказывается сервер? Элемент form принимает атрибут действия, значение которого должно быть указано в URL-адресе сервера. Он также принимает атрибут метода, где указывается метод HTTP, используемый для передачи значений на сервер.

Этот метод мог бы быть GET или POST. С GET метод, значения, введенные пользователем, отображаются в URL-адресе при подаче данных. Но с POSTзначения отправляются в заголовках HTTP, поэтому эти значения не отображаются в URL-адресе.

Если атрибут метода не используется в форме, автоматически предполагается, что пользователь хочет использовать метод GET, поскольку он по умолчанию.

Итак, когда следует использовать GET или POST метод? Использовать GET метод подачи нечувствительных данных или получения данных с сервера (например, при поиске). Использовать POST запрос при подаче файлов или конфиденциальных данных.

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

Вот HTML:

<form action=example-server.com">
      <fieldset>
        <legend>Contact me</legend>
        <div class="form-control">
          <label for="name">Name</label>
          <input type="name" id="name" placeholder="Enter your name" required />
        </div>

        <div class="form-control">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            placeholder="Enter your email"
            required
          />
        </div>

        <div class="form-control">
          <label for="message">Message</label>
          <textarea
            id="message"
            cols="30"
            rows="10"
            placeholder="Enter your message"
            required
          ></textarea>
        </div>
        <input type="submit" value="Send" class="submit-btn" />
      </fieldset>
</form>

Что происходит в этом HTML-коде?

Во-первых, а form Элемент обертывает каждый другой элемент. В нем установлено действие “example-server.com”, фиктивный сервер, на который будут получены данные формы.

После элемента формы каждый другой элемент также окружен символом a fieldset элемент с a legend тег прямо под ним.

Мы используем fieldset элемент для группировки связанных входов вместе, и legend тег содержит подпись, которая передает, о чем идет речь в форме.

Входы name, emailи textarea все в а div с классом формы-контроля Поэтому они ведут себя как блочный элемент, чтобы облегчить стилизацию с помощью CSS.

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

После всего этого мы получим результат на скриншоте ниже:
unstyledForm

Насколько это некрасиво? Нам нужно применить стиль!

Вот CSS:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: cursive;
  }

 input,
    textarea {
    width: 100%;
    padding: 5px;
    outline: none;
  }

  label {
    line-height: 1.9rem;
  }

  input[type="submit"] {
   transform: translate(2.2%);
   padding: 3px;
   margin-top: 0.6rem;
   font-family: cursive;
   font-weight: bold;
  }

 fieldset {
   padding: 20px 40px;
 }

Что здесь делает код CSS?

Мы центрируем всё в теле горизонтально с помощью Flexbox и вертикально со 100% высоты окна просмотра. Мы использовали семейство шрифтов скорописи.

Мы ввели входные данные и textarea шириной 100%, чтобы они проходили по всему пути. Метки имеют минимальную высоту строки 1,9 rem (30,4 пикселей), поэтому они не остаются слишком близки к соответствующим входам.

Мы специально оформили кнопку (кнопку типа ввода) со свойством transform, чтобы переместить ее в центр, поскольку она была немного вне центра. Мы дали ему отступление в 3 пиксела для большего интервала вокруг него. Затем мы выбрали для него семейство скорописных шрифтов с жирным шрифтом.

Потому что кнопка была слишком близко к textareaмы устанавливаем margin-top 0,6 rem, чтобы немного снизить его.

Мы предоставили нашему элементу fieldset отступление в 20 пикселей вверху и внизу, по 40 пикселей слева и справа, чтобы раздвинуть границу, которую он создает вокруг form элементы, в которые он завернут.

В конце всего мы имеем красивую форму ниже:
styledForm

Вывод

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

Спасибо, что читаете, и продолжайте кодировать.

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

Ваш адрес email не будет опубликован.