Спрайты

HTTP 1.1 – одно соединение TCP (браузеры создают параллельно от 2 до 8 параллельных соединений)

HTTP 2 – все запросы между браузером и сервером мультиплексированы (прим. уплотнены) в одно TCP соединение. Это позволяет загружать десятки изображений в параллели в одном TCP соединении.

 

  • один спрайт-сет загружается единожды используя один запрос
  • объединённый размер меньше чем сумма
  • время загрузки значительно короче

 

  • CSS код значительно проще без спрайт-сета
  • обновление браузерного кеша при каждой модификации спрайт-сета
  • Использование отдельных изображений вместо спрайт-сетов позволяет загружать только те из них, которые нужны из всей коллекции

 

Creating svg sprites using gulp and sass

Form

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

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

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

Дизайн формы

 

form design

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

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