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, который объясняет их применение.

Для работы с информацией полученной при помощи форм необходимо настроить сервер, который будет обрабатывать полученные данные. Статья как работать с полученной информацией из форм.

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

Дизайн формы

• UX Form – Smashing magazine
• Extensive Guide Tp Web Form Usability 
• UXMatters Basic best practices
• UXMatters multi-page forms

 

в этой форме три поля и одна кнопка. Обычно запрашивается имя пользователя, почта и текст сообщения. 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

1. autocomplete (on/off разрешает автозаполнение браузером)
2. checked (делает кнопку активной)
3. list ()
4. readonly
5. value

 

See the Pen vLOQQW by Alexander Dolgan (@AlexanderDolgan) on CodePen.0

 

MDN – Forms

htmlacademy

Шпаргалка блогера