1. Формы в HTML

В HTML существуют формы (<form>). В этих формах существуют строковые (<input type="text">), текстовые (<textarea>) и другие элементы. Приведу пример базовой формы:

<form>
    <input type="text" name="nickname" placeholder="Ваш никнейм">
    <input type="password" name="pass" placeholder="Ваш пароль">
    <input type="email" name="email" placeholder="Ваш емейл">
    <textarea placeholder="Пару слов о себе"></textarea>
    <input type="hidden" name="hide" value="1">
    <input type="submit" value="Отправить форму">
</form>

Общее для всех:
type - тип поля. Указывается для input
name - название поля, при отправки формы она преобразуется в массив название=значение
value - значение поля. Если значение отсутствует, тогда оно будет = тому, что впишется пользователь в поле
placeholder - то, что будет выводится "поверх" поля, т.е. поясняющий текст / он исчезает, если нажать на поле и появляется вновь, если убрать фокус с поля и ничего при этом не ввести

Теперь по типам:
text - обычный текст
password - пароль / обычный текст, но вводимые символы преобразуются в точки, чтобы никто не подглядел
email - емейл / обычный текст, то не даст отправить в форму, если емейл адрес не соответствует шаблону текст@текст.домен / делается для того, чтобы не вводили бред в это поле
hidden - поле скрыто, пользователь его не видит на странице / используется, чтобы передать какое-либо значение
submit - кнопка для отправки формы / даже без тега submit, по-умолчанию, форма будет отправляться при нажатии на любую кнопку (<button></button>)

Другие интересные составляющие:

Список:

<select name="forum">
        <option value="1">colorforum.ru</option>
        <ontion value="2">qssupport.ru</ontion>
    </select>

В списке (select) представлены опции (option). Пользователь может выбрать одну из опций, её value будет передано как значение списка (в случае выбора colorforum.ru - forum=1

Чекбоксы:

<input type="checkbox" name="check1" value="1"> <input type="checkbox" name="check2" value="2">

Пользователь может галочкой отметить эти два чекбокса. Если он их отметит, оба чекбокса будут отправлены (check1=1 / check2=2), если выберет только второй, тогда отправится только второй (check2=2).

Радио:

<input type="radio" checked="checked" name="raz" value="1"> <input type="radio" name="raz" value="2"> <input type="radio" name="raz" value="3>

Радио позволяется выбрать только один из предложенный вариантов. У всех доступных вариантов должен быть одно и то же имя (в примере name="raz"). Так же тут используется checked="checked". Это свойство указывает, что первый вариант должен быть выбран по умолчанию. Такое же свойство можно задать чекбоксам.

2. Отправка формы

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

Методы

Метод указывается так:

<form method=""> </form>

Методов два:
post - все данные будут отправлены POST запросом, о нём вы можете прочитать тут
get - все данные будут отправлены в виде GET запроса / GET запрос добавляет значения формы в адресную строку, т.е. форма из имени и фамилии при обращении на сайт будет такой:

подчёркнутое - данные нашей формы.

Если метод не указан, по-умолчанию он GET.

Action (куда отправляется форма)

Это указывается так:

<form action=""> </form>

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

Если экшен не указан, по-умолчанию форма отправится на страницу, где эта форма находится.

3. Кастомизация формы при помощи CSS

Форму можно кастомизировать при помощи CSS. Думаю, лучше просто кодом всё показать:

4. Задание

Это последний урок по HTML/CSS, со следующего мы начнём изучать основы js/jquery и постепенно перейдём к майббу. Посему можете считать это обобщением остальных уроков вместе взятых.

1. Нужно создать форму после текста по следующему макету (кликабельно):

2. Дополнительно:
- все поля и кнопка отправки должны быть с border-radius 10
- у кнопки отправки должен быть фон в виде градиента (белый/серый)
- при наведении на кнопку отправить её фон должен становится зеленым
- если я добавлю ещё несколько полей с классами newinput1 newinput2 newinput3, они не должны быть с загругленными краями, как остальные
- ни один элемент формы не должен иметь классов или ИД
- нельзя в css задавать стиль для newinput1 newinput2 newinput3 классов, но можно использовать их в псевдо-классах
- нельзя использовать таблицу, вспоминайте float

Результат нужно скинуть под скрытым текстом в виде ссылки на Google Drive, Я.Диск и т.д., только не на дерьмо а ля letitbit.