HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
Example
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
All the different form elements are covered in this chapter: HTML Form Elements.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
| Type | Description |
|---|---|
| <input type="text"> | Displays a single-line text input field |
| <input type="radio"> | Displays a radio button (for selecting one of many choices) |
| <input type="checkbox"> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type="submit"> | Displays a submit button (for submitting the form) |
| <input type="button"> | Displays a clickable button |
All the different input types are covered in this chapter: HTML Input Types.
Text Fields
The <input type=»text»> defines a single-line input field for text input.
Example
A form with input fields for text:
This is how the HTML code above will be displayed in a browser:
Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
Radio Buttons
The <input type=»radio»> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<p>Choose your favorite Web language:</p>
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
HTML
CSS
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
The Submit Button
The <input type=»submit»> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form’s action attribute.
Example
A form with a submit button:
This is how the HTML code above will be displayed in a browser:
The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field:
HTML Form – Input Type and Submit Button Example
Kolade Chris
Forms are one of the most important parts of the web. Without them, there wouldn’t be an easy way to collect data, search for resources, or sign up to receive valuable information.
You can embed forms on websites with the HTML form element. Inside the form element, several inputs are nested. These inputs are also known as form controls.
In this tutorial, we will explore the HTML form element, the various input types it takes, and how to create a submit button with which data is submitted.
By the end, you will know how forms work and you’ll be able to make them with confidence.
Basic HTML Form Syntax
HTML Form Input Types
You use the <input> tag to create various form controls in HTML. It is an inline element and takes attributes such as type , name , minlength , maxlength , placeholder , and so on. Each of these has specific values they take.
The placeholder attribute is important as it helps the user understand the purpose of the input field before they type anything in.
There are 20 different input types, and we will look at them one by one.
Type Text
This type of input takes a value of “text”, so it creates a single line of text input.
An input with the type of text looks like the screenshot below:
Type Password
As the name implies, an input with a type of password creates a password. It is automatically invisible to the user, unless it is manipulated by JavaScript.
Type Email
Any input with the type of email defines a field for entering an email address.
Type Number
This type of input lets the user insert numbers only.
Type Radio
Sometimes, users will need to pick one out of numerous options. An input field with its type attributes set to “radio” lets you do this.
Type Checkbox
So, with an input type of radio, users will be allowed to pick one out of numerous options. What if you want them to pick as many options as possible? That’s what an input with a type attribute set to checkbox does.
Type Submit
You use this type to add a submit button to forms. When a user clicks it, it automatically submits the form. It takes a value attribute, which defines the text that appears inside the button.
Type Button
An input with a type set to button creates a button, which can be manipulated by JavaScript’s onClick event listener type. It creates a button just like an input type of submit, but with the exception that the value is empty by default, so it has to be specified.
Type File
This defines a field for file submission. When a user clicks it, they are prompted to insert the desired file type, which might be an image, PDF, document file, and so on.
The result of an input type of file looks like this:
Type Color
This is a fancy input type introduced by HTML5. With it, the user can submit their favourite color for example. Black (#000000) is the default value, but can be overridden by setting the value to a desired color.
Many developers have used it as a trick to get to select different color shades available in RGB, HSL and alphanumeric formats.
This is the result of an input type of color:
Type Search
Input with the type of search defines a text field just like an input type of text. But this time it has the sole purpose of searching for info. It is different from type text in that, a cancel button appears once the user starts typing.
Type URL
When the type attribute of an input tag is set to URL, it displays a field where users can enter a URL.
Type Tel
An input type of tel lets you collect telephone numbers from users.
Type Date
You might have registered on a website where you requested the date of a certain event. The site probably used an input with the type value set to date to acheive this.
This is what an input with type date looks like:
Type Datetime-local
This works like the input type date, but it also lets the user pick a date with a particular time.
Type Week
The input type of week lets a user select a specific week.
Type Month
The input with the type of month populates months for the user to pick from when clicked.
Textarea
There are times when a user will need to fill in multiple lines of text which wouldn’t be suitable in an input type of text (as it specifies a one-line text field).
textarea lets the user do this as it defines multiple lines of text input. It takes its own attributes such as cols – for the number of columns, and rows for the number of rows.
Multiple Select Box
This is like a radio button and checkbox in one package. It is embedded in the page with two elements – a select element and an option , which is always nested inside select .
By default, the user can only pick one of the options. But with multiple attributes, you can let the user select more than one of the options.
How to Label HTML Inputs
Assigning labels to form controls is important. When they’re properly connected to the input field through their for attribute and the input’s id attribute, it’s easier for the user to use as they can just click the label itself to access the input.
How HTML Forms Work
When a user fills in a form and submits it with the submit button, the data in the form controls are sent to the server through GET or POST HTTP request methods.
So how is the server indicated? The form element takes an action attribute, which must have its value specified to the URL of the server. It also takes a method attribute, where the HTTP method it uses to convey the values to the server is specified.
This method could be GET or POST . With the GET method, the values entered by the user are visible in the URL when the data is submitted. But with POST , the values are sent in HTTP headers, so those values are not visible in the URL.
If a method attribute is not used in the form, it is automatically assumed that the user wants to use the GET method, because it’s the default.
So when should you use the GET or POST method? Use the GET method for submitting non-sensitive data or retrieving data from a server (for example, during searches). Use the POST request when submitting files or sensitive data.
Mini Project: Build a Basic Contact Form
Let’s take what we’ve learned about forms and use it to make a simple contact form. I will also introduce a few new concepts as we go to round it all out.
Here’s the HTML:
What’s going on in this HTML code?
First, a form element is wrapping every other element. It has an action set to “example-server.com”, a dummy server where the form data will be received.
After the form element, every other element is also surrounded by a fieldset element with a legend tag right under it.
We use the fieldset element to group related inputs together, and the legend tag contains a caption conveying what the form is about.
The inputs name , email , and textarea are all in a div with a class of form-control. So they behave like a block element, in order to make styling easier with CSS.
They are also validated with the required attribute, so the form fails to submit when those fields are empty or when the user fails to type in the values in the appropriate format.
After all that, we’ll have the result in the screenshot below:
How ugly is that? We need to apply some styling!
Here’s the CSS:
What’s the CSS code doing here?
We center everything in the body horizontally with Flexbox, and vertically with a 100% viewport height. We used a font-family of cursive.
We gave the inputs and textarea a width of 100% so they go all the way across. The labels got a minimal line-height of 1.9rem (30.4px), so they don’t stay too close to their respective inputs.
We specifically styled the button (input type button) with the transform property to push it to the center as it was off center a bit. We gave it a padding of 3px for more spacing around it. We then selected a cursive font-family for it with a weight of bold.
Because the button was too close to the textarea , we set a margin-top of 0.6rem to push it down a little bit.
We gave our fieldset element a padding of 20px at the top and bottom, with 40px at the left and right to push apart the border it creates around the form elements it is wrapped in.
At the end of it all, we have the beautiful form below:
Conclusion
I hope this tutorial has helped you understand how forms work. Now you should have the knowledge you need to integrate forms into your websites so you can start collecting data.
Формы — Основы верстки контента
Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Для этого в HTML существуют специальные конструкции, которые говорят браузеру, какие поля может использовать пользователь и как их обрабатывать.
Тема форм достаточно большая, чтобы описать ее в рамках одного урока, ведь со всеми возможными нюансами это может вылиться в целый курс. Не бойтесь — в этом уроке вы узнаете достаточно, чтобы научиться делать хорошие формы.
Создание формы
Для отделения формы от остальных участков верстки используется специальный тег <form> . Если его не использовать, то браузер не поймет, какие именно данные нужно отправить. Ведь на странице может быть не одна, а сразу несколько различных форм.
Сервер — удаленный компьютер, на котором хранится весь проект. Сейчас вы смотрите на страницу, которая сгенерирована на сервере и отдана вам по определенному адресу. Этот адрес указан сейчас в вашем браузере.
Примером взаимодействия с формой является любой сайт-поисковик. Например, Google или Yandex. Вы вводите поисковый запрос, который отправляется на сервер. Сервер обрабатывает результат и выдает вам подходящие сайты. Это взаимодействие происходит с помощью серверных языков программирования, таких как PHP, Ruby и так далее. В рамках верстки мы не можем влиять на то, как обработается результат. Результат верстки — набор тегов, с помощью которых браузер соберет данные и отправит их на сервер.
Тег <form> может принимать несколько различных атрибутов. Они не являются обязательными, но их использование может серьезно повлиять на работу. Самым главным из них является атрибут action . Этот атрибут позволяет указать директорию или файл на сервере, куда будут отправлены данные. Если этот атрибут не указан, то данные будут отправлены на ту же страницу, где форма и находится.
Смысл этого действия вы лучше поймете, если будете заниматься Backend разработкой. Например, на языке PHP или Python. Если сейчас вам кажется это сложным, то не отчаивайтесь. Разработчики всегда вам подскажут, куда стоит отправлять данные.
Поля формы
Одного тега <form> недостаточно для полноценного создания формы, ведь пользователь должен ввести какие-то данные. Самый простой способ — дать какое-то поле для ввода текста, куда пользователь может ввести информацию. В HTML для этого используется два тега:
- <input> — одиночный тег, в котором располагается небольшая информация. Это может быть телефон, email, дата рождения, имя и так далее.
- <textarea> — парный тег, позволяющий пользователю ввести длинное сообщение. Это могут быть комментарии к заказу, отзыв.
textarea
Самый простой тег — <textarea> . Его задача — создать большое поле для ввода текста.
В примере вы можете увидеть два атрибута тега <textarea> : cols и rows . Они отвечают за количество символов и строк, которые доступны внутри <textarea> . Если контента будет больше, то появится полоса прокрутки.
Попробуйте изменить размер элемента <textarea> . Это можно сделать потянув за правый нижний угол. Так вы можете увеличить не только ширину, но и высоту элемента.
Такое поведение зачастую вредит нашему дизайну. Поэтому разработчики в большинстве случаев запрещают такое поведение. Тут есть несколько вариантов:
- Можно задать высоту и ширину элемента через CSS. Тогда браузер не даст растягивать элемент.
- Использовать свойство resize со значением none . Его можно использовать, если не требуется поддержка некоторых мобильных браузеров и Internet Explorer. Полный список поддерживаемых браузеров можно посмотреть на сайте Can I use.
input
Большую группу полей можно создать, используя тег <input> , главным атрибутом которого является type . Он указывает на то, как именно браузер должен обработать элемент. Рассматривать каждое значение бессмысленно, так как такое количество информации быстро забудется, если ее не использовать.
В этом уроке рассмотрим одни из самых популярных значений атрибута type .
Самый простой вид <input> , который позволяет ввести любую пользовательскую информацию. Никаких проверок полей не происходит. Единственное исключение — удаление переносов строк перед отправкой на сервер. Если нужны данные с переносом текста, то используйте тег <textarea> .
Заметьте, что сейчас поле никак не подписано и из-за этого абсолютно непонятно что надо ввести пользователю. Первое, что приходит в голову — добавить перед полем заголовок или параграф. Да, это создаст видимость описания поля. Но только видимость! С точки зрения семантики в таком варианте нет никакой связи между текстом и полем ввода. Это критично для пользователей, которые пользуются скринридерами, так как они не смогут связать название и поле для ввода.
Скринридер (Screen Reader) — устройство для чтения текста с экрана. Используется слепыми или слабовидящими людьми.
Для связи поля и его названия используется тег <label> , внутри которого вставляется текст. Чтобы связать <label> и <input> используется один из двух вариантов. Они равнозначны, поэтому можете использовать тот, который удобен в конкретной ситуации.
- Связь по идентификатору. Для этого тегу <input> устанавливается уникальный id . Для тега <label> устанавливается атрибут for , значением которого является идентификатор ввода.
- Вложение <input> внутрь <label> . Такой способ помогает избавиться от указания идентификаторов, но может немного усложнить процесс стилизации.
Важно: все элементы, которые доступны пользователю для заполнения должны иметь тег <label> . Это элементы <input> и <textarea> . Это справедливо даже в случае визуального отсутствия подписи к полю.
Для скрытия элемента можно воспользоваться следующим CSS-кодом. В процессе вашего роста как разработчика, вы поймете все правила, описанные в данном коде. Обычно класс для скрытия элемента называют .sr-only . Такой элемент будет невидимым для пользователя, но его сможет «прочитать» скринридер. Название класса является сокращением от screen reader only .
type="radio"
Радиокнопки используются для выбора одного варианта из множества доступных. Почему такой тип называется radio? Есть мнение, что такое название тип получил от первых автомобильных радиоприемников. В них было доступно несколько радиостанций, но выбрать можно было только одну. Здесь смысл очень похож на принцип таких приемников.
Помимо атрибутов, которые использовались в прошлых примерах, для радиокнопок есть еще один важный атрибут — name . Он является уникальным для группы радиокнопок.
Помимо атрибута name у радиокнопок используется атрибут value . Внутри него находится то значение, которое отправится на сервер.
type="checkbox"
Чекбоксы немного похожи на радиокнопки, но имеют существенное отличие — возможность выбора сразу нескольких значений. Представьте, что пользователь выбирает любимые блюда. Скорее всего это не одно блюдо, а сразу несколько. Можно дать возможность просто их написать с помощью <textarea> , но грамотнее будет использовать чекбоксы.
Списки
Отдельным элементом формы являются списки. Представьте себе фильтр на сайте по продаже техники. Одновременно вы можете отфильтровать товары только в одной категории. Для этого можно использовать радиокнопки или даже чекбоксы в случае множественного выбора. Но есть еще один способ — использование списка.
Создание списка очень похоже на создание списка текста. В формах для этого используется тег <select> , пункты которого лежат внутри тегов <option> .
В примере появился новый атрибут — selected . Он отвечает за то, какой элемент выбран по умолчанию. Если он не указан, то будет выбран первый элемент списка.
Для элементов радиокнопок и чекбоксов для выбора по умолчанию используется атрибут checked
Для списков доступен еще один интересный атрибут — multiple . С его помощью список становится похож на чекбоксы и позволяет выбрать сразу несколько пунктов.
Отправка формы
В прошлом разделе мы рассмотрели различные способы взаимодействия пользователя и формы. Но это не имеет никакого смысла, если форма не будет отправлена. Для этого нужно создать элемент, при взаимодействии с которым будет отправлена форма.
Отправка формы может быть осуществлена одним из двух способов:
- Создание <input> с типом submit . В этом случае создастся элемент в виде кнопки с именем, указанным в качестве значения атрибута value .
- Использование парного тега <button> . Такой способ больше развязывает руки, так как внутри такой кнопки может содержаться любой HTML код, при клике на который будет отправлена форма. Такой способ очень удобен для создания кнопки в виде иконки. Сейчас такой способ наиболее актуальный.
Разделение участков формы
Cтрашный сон пользователя — длинная форма без разделения на секции. К центру такой формы уже непонятно, для чего именно заполняются те или иные поля. Можно отделять секции с помощью заголовков или визуально. Но браузеры предоставляют специальный механизм для разделения участков формы на логические секции — fieldset . Их можно рассматривать как альтернативу тегу <section> , но только для форм. В качестве заголовка выступает тег <legend> .
Текст внутри текстового поля
Во всех примерах этого урока текстовые поля изначально были пустыми. Наверное вы часто видели, что до фокуса на поле есть текст, который предлагает ввести данные или показывает формат, в котором ожидаются данные.
За вывод такого текста отвечает атрибут placeholder , значением которого является текст, выводимый до ввода символов в поле
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Формы в HTML
В наше время сложно представить сайт без форм — мы сталкиваемся с ними каждый раз при оформлении заказа пиццы и при регистрации на сайтах. Они позволяют нам отправлять запросы с введенными нами данными на удаленные сервера. И именно о формах мы поговорим в этом уроке.
Кстати, на большинстве сайтов обработка форм на стороне бэкенда происходит с помощью PHP, который вы можете изучить у нас бесплатно.
Чтобы создать форму используется тег <form> с двумя атрибутами:
- Атрибут action. С его помощью указывается адрес, на который отправятся введенные на форме данные
- Атрибут method. С его помощью указывается HTTP-метод отправки формы (get, post, put, и т.д.). Подробнее о разных методах читайте тут и тут.
Внутри тега form размещаются непосредственно поля для заполнения данных и кнопка для отправки формы.
Чтобы создать текстовое поле для ввода нужно воспользоваться тегом <input> со следующими атрибутами:
type — говорит о том, что это просто текстовое поле;
name — это имя поля, которое отправится в запросе на сервер, а его значением будет то, что мы введем в нем на форме.
А чтобы создать кнопку для отправки формы используется опять тег <input>, но уже с другими атрибутами:
Давайте создадим свою простейшую форму, которая будет формировать поисковый запрос в Яндекс. У Яндекса для формирования поискового запроса используется query-параметр в адресной строке с именем text, поэтому имя нашего текстового поля такое же. Чтобы отправить поисковый запрос нужно отправить get-запрос на адрес:
https://yandex.ru/search/?text=PHP
Давайте сформируем форму для поиска в Яндексе:
Форма будет выглядеть так: 
Теперь, когда мы нажмём на кнопку, мы попадём на страницу поиска в Яндексе: 
Таким образом, мы передали содержимое поля с именем text в параметр text на странице поиска в Яндексе.
Подписи к полям ввода
Чтобы привязать к полю ввода подпись используется тег <label> с атрибутом for, в котором указывается id инпута. Этот id, разумеется, нужно заранее добавить.
Вот как это будет выглядеть на примере.
Результат в браузере: 
Теперь если нажать на текст рядом с полем ввода, то курсор для ввода данных переключится на соответствующее поле
Создаём форму авторизации на HTML
Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля. Первое поле – для логина, второе – для пароля.
Результат в браузере: 
Со вторым полем не все в порядке. Поскольку на текущий момент оно представляет собой просто поле для ввода текста, вводимый пароль отображается на экране монитора. Не секьюрно! К счастью, специально для паролей для инпута есть тип password.
В итоге код нашей формы получится следующим:
Результат в браузере: 
Вот и получилась наша формочка авторизации на HTML. Изи!
Тег textarea — многострочное поле ввода:
Для создания многострочного поля используется тег <textarea>. Этот тег является парным, в отличие от <input>. А ещё для управления его шириной и высотой можно управлять с помощью атрибутов cols и rows соответственно.
На примере выглядит вот так:
Результат в браузере: 
Чекбокс
Чекбокс создается тегом <input> с атрибутом type="checkbox". Если чекбокс на форме отмечен, то на бэкенд уйдет переменная с именем инпута, а иначе — нет. Чтобы чекбокс на форме был отмечен по умолчанию, то нужно добавить атрибут checked. Выглядеть это будет вот так:
Радиобаттон
Радиобаттон создается тегом <input> с атрибутом type="radio". Он служит для выбора одного варианта из нескольких. Все варианты должны иметь одинаковый атрибут name и разные атрибуты value. Значение атрибута value отмеченного радиобаттона будет отправлено на бэкенд.
Форма для загрузки файлов
Чтобы создать форму для загрузки файлов, использутеся тег <input> с типом file. При этом самой форме нужно прописать атрибут enctype="multipart/form-data":
А вот так будет выглядеть наше получившееся поле: 