Base form set
<form action="index.html" method="post"> //create form action index.html method post
<h1>About form</h1>
//Fieldset form section
<fieldset>
//legend label for fieldset
<legend>Main information</legend>
//label name for input with id name
<label for="name">Name:</label>
//text input
<input type="text" id="name" name="user_name">
<label for="email">Email:</label>
//email input
<input type="email" id="email" name="user_email">
<label for="password">Password:</label>
//password input
<input type="password" id="password" name="user_password">
</fieldset>
<fieldset>
<legend>About</legend>
<label for="bio">Biography</label>
<textarea name="bio" id="bio"></textarea>
</fieldset>
<label for="job">Job role:</label>
<select name="user_job" id="job">
<optgroup label="Web">
<option value="frontend_developer">Frontend developer</option>
<option value="php_developer">PHP developer</option>
</optgroup>
<optgroup label="mobile">
<option value="android_developer">Android developer</option>
<option value="ios_deveoper">iOS developer</option>
</optgroup>
</select>
<label>Age:</label>
<input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13">Under 13</label><br>
<input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13>Over 13</label>
<label>Interests:</label>
<input type="checkbox" id="development" value="interest_development name="user_interest"><label for="development"><meta charset='utf-8'><pre class="enlighterjsraw" data-enlighter-language="html">Development</label><br>
<input type="checkbox" id="business" value="interest_business" name="user_interest"><label for="business">Business</label><br>
// button with type submit, another option for backend type="button", and type="reset"
<button type="submit">Sign Up</button>
</form>
Формы – это одина из основных возможностей взаимодействия между пользователем и сайтом/приложением. Они позволяют отправлять информацию на сервер. В большинстве случаев информация отправляется на сервер, но сама страница так же может перехватить ее и использовать в своих целях.
HTML форма состоит из одного или нескольких виджетов.
- text field (одна или несколько строк)
- select boxes
- buttons
- checkboxes
- radio buttons
В большинстве случаев, для всех вариантов может быть инициирован label, который объясняет их применение.
Для работы с информацией полученной при помощи форм необходимо настроить сервер, который будет обрабатывать полученные данные. Статья как работать с полученной информацией из форм.
Перед началом работы с формами, хорошей практикой считается составление наброска с необходимыми полями формы, чтобы лучше понимать, какую информацию вы хотите получить от посетителя сайта, и в зависимости от этого использовать подходящие виджеты. Необходимо помнить, что чем больше полей в форме, тем меньше вероятность, что пользователь их заполнит, следует запрашивать только необходимую информацию.
Дизайн формы

в этой форме три поля и одна кнопка. Обычно запрашивается имя пользователя, почта и текст сообщения. HTML дескрипторы – <form>, <label>, <input>, <textarea> и <button>.
<form> – элемент
<form action="/my-handling-form-page" method="post">
</form>
Этот элемент объявляет форму и является контейнером для формы. Атрибуты указывать необязательно, но лучше всегда прописывать action (URL куда отправится полученная через форму информация) и method (указывает какой html метод используется при отправке get или post).
В нашей форме всего три текстовых поля, и у каждого есть свой <label>. Поле Имя – базовый input с типом text; поле для почты – input с типом email, позволяющий ввести только адрес почты – статья о валидации; поле для сообщения – многострочный текстовый тип.
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg"></textarea>
</div>
</form>
Блоки div помогают структурировать код и помогут при написании стилей CSS. Для привязки label к виджету используется атрибут for, ссылаясь на id родительского. Одна из основных функций label – пользователь может кликнуть на лейбл и активировать родительский виджет. Статья – Как организовать HTML структуру формы.
Основной атрибуд для виджета input – type, от которого зависит, как будет себя вести input. Статья о виджетах формы.
атрибут value –
<input type="text" value="этот текст будет отображаться по умолчанию" />
<textarea>этот текст будет отображаться по умолчанию</textarea>
button –
<div class="button">
<button type="submit">отправить сообщение</button>
</div>
У кнопки может быть три типа:
- submit – отправляет информацию из формы по объявленному пути в form action.
- reset – сбрасывает все поля формы в стартовое значение value
- button – используется для создания кнопок управляемых при помощи JS
Cheсkbox
autocomplete (on/off разрешает автозаполнение браузером)
checked (делает кнопку активной)
list ()
readonly
value
See the Pen vLOQQW by Alexander Dolgan (@AlexanderDolgan) on CodePen.0
MDN – Forms
htmlacademy
Шпаргалка блогера