Форма регистрации html

Всем привет, меня зовут Артем! Я решил получить новую профессию — веб-разработчик. Для этого я выбрал язык JavaScript. Перед собой я поставил цель пройти все курсы за 6-7 месяцев. Начал я свое обучение на Hexlet совсем недавно. Прошел курс html для начинающих на сайте code-basic — он к стати тоже является разработкой Hexlet-а. По окончанию подготовительного курса я понял, что информации получил много, но не хватает практики, которая закрепит новые знания. Поэтому в блоге я буду ставить себе задачу и стараться выполнить ее.

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

Сегодня я буду делать форму для регистрации. Для выполнения данного задания вам понадобиться онлайн среда программирования. Можно воспользоваться сайтами  codepen или repl. Я также оставлю ниже шорткод где вы сможете потренироваться, не переходя на другой сайт.

See the Pen zYxOKBe by Artem (@Polkovnik123) on CodePen.dark

План

  1. Реализовать простую форму регистрации на сайт, при этом использовать только html.
  2. Максимально использовать знания которые получил при прохождении курсов на code-basic.
  3. Таблица должна быть выровнена по центру; ширина 420; цвет фона — белый; граница ячеек 5;
  4. Форма регистрации должна содержать 2 колонки и 13 строк.
  5. Само слово » Форма регистрации » должно быть оформлено с помощью тега <h1> и расположено по центру.
  6. Строка «Имя» должна содержать: тип — text ; максимальная длина символов 15; при наведении курсора на строку должна всплывать подсказка — «Имя»; также должна присутствовать подсказка для пользователя в строке — «Имя»; строка должна быть обязательна для заполнения;.
  7. Строка «Фамилия» должна содержать: тип — text; максимальная длина символов 15; также должна присутствовать подсказка для пользователя в строке — «Фамилия»;.
  8. Строка «Пароль» должна содержать: тип — password ;
  9. Строка «Подтверждения пароля» должна содержать: тип — password;
  10. Строка «Электронная почта»: тип email;
  11. Строка «Номер телефона»: тип number;
  12. Строка «Адрес»: поле для ввода текста; 3 строки; 20 колонок; максимальная длина 80 символов; всплывающая подсказка(по желанию);
  13. Строка «Пол»: можно выбрать только один вариант <radio>; воспользоваться тегом <label>; указать value и name;
  14. Строка «Увлечения»: тип checkbox — можно выбрать сколько угодно вариантов; воспользоваться тегом <label>; указать value и name;
  15. Строка «Дата рождения»: атрибут тип, значение date;
  16. Строка «Страна»: список выбора страны; указать name;
  17. Строка «Загрузки фотографии»: атрибут тип указать file;
  18. Строка с двумя кнопками: сперва объединить две ячейки colspane; расположить по центру; одна кнопка отправляет данные submit, другая сбрасывает(обновляет) reset;

Приступим…… Пишем вот такой код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>
                HTML Форма регистрации
        </title>
        <meta name="description" content="Как сделать форму заявки на сайт с помощью html - основы">
    </head>
    <body>
        <h1 align="center">Форма регистрации</h1>
        
            <form action="">

            </form>
        
    </body>
</html>

В первой строчке указываем DOCTYPE (document type) — это служебная информация для браузера.

Далее открывается парный тег <html> с атрибутом <lang=»ru>». Это необходимо для браузеров, особенно если сайт рассчитан на зарубежную аудиторию.

Тег <head> содержит мета-информацию о нашем сайте. Информация из этого тега не выводится на страницу, но содержит важную информацию, например как: стили или разные скрипты.

Затем мы указали кодировку UTF-8  это одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.

В тег <title> запишем «HTML Форма регистрации». Данный тег предназначен для указания информации поисковым роботам и браузерами. Совет: используйте заголовок от 50 до 80 символов.

Чтобы добавить описание страницы воспользуемся мет-тегом description. Эта информация также появляется в результатах поиска.

Закрываем тег <head> и открываем тег <body> где будет храниться наша таблица.

В тег <h1> записываем «Форма регистрации» и не забываем указывать расположение по центру с помощью атрибута align.

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером

Атрибут который считается основным у этого тега является action -он указывает путь к файлу, где находится обработчик данных. Именно туда уйдут данные после отправки формы. Если данный атрибут не указан, данные уйдут на ту же страницу, откуда была отправлена форма.

<table border="5" align="center" width="420" bgcolor="#FFFFFF"></table>

Создаем таблицы с помощью тега <table>. Затем указываем параметры таблицы: границы, расположение, ширина и цвет фона.

Затем создаем 13 строк тегом <tr>, не забываем их закрывать. Сразу с помощью тега <th> который создает ячейку с заголовком, вписываем названия строк. У вас должно получиться что-то подобное…

See the Pen WNbeRKo by Artem (@Polkovnik123) on CodePen.dark

Основным элементов форм является тег <input>. Он позволяет задать различные поля для ввода данных: текст, пароли и так далее. Данный тег должен быть помещен в другие теги, в нашем случае в тег <td>. То есть input находится в теги <td>, а тег <td> как и тег <th> в строке <tr>. Надеюсь вы еще не запутались! Для понимания, что за чем идет, может уйти достаточно времени. Постарайтесь запомнить эту информацию, она очень важна.

<table border="5" align="center" width="420" bgcolor="#FFFFFF">
<tr>
<th>Имя</th>
<td>
<input type="text" maxlength="15" placeholder="Имя" title="Имя" required>
</td>
</tr>

В тег input вносим атрибуты: тип, максимальная длина и подсказки, как показано выше.

Похожею операцию проделываем со строками: фамилия, пароль, подтвердите пароль, e-mail и номер телефона. При этом меняем значение у атрибутов.

<input type="password">
<input type="email">
<input type="number">

Часто мы хотим дать пользователю возможность набрать не одну строчку текста, а сразу несколько. Например, если пользователь хочет оставить отзыв или оставить точный адрес. Для этого используется элемент <textarea>, позволяющая вводить пользователю несколько строчек текста.

<tr>
<th>Адрес</th>
<td>
<textarea rows="3" cols="20" maxlength="80" placeholder="Введите адрес"></textarea>
</td>
</tr>
<tr>

Если нам необходимо получить от пользователя один ответ из двух, то лучше воспользоваться радиокнопками.

Также обязательным атрибутом является значение name. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута у пользователя будет возможность выбрать все значения сразу, так как браузер не будет видеть связи между ними.

Тег <label> используется для того, чтобы изменять значения элементов формы при нажатии курсором мыши на текст.

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

<label>
<input type="radio" name="gender" value="female">
Женский
</label>

Cоздать связи между <label> и <input> можно двумя спосабами. Связь по id или вложить input внутрь тега label. При этом указание уникального id не требуется. Мы воспользуемся вторым способом.

В случае с чекбоксами можно выбрать все варианты.

<label>
<input type="checkbox" name="hobby" value="sport">
 Спорт
</label>

Строка «Дата рождения» содержит атрибут type со значением date, делаем все аналогично предыдущим примерам.

Выпадающий список стран. Код выглядит следующим образом

<tr>
<th>Страна</th>
<td>
<select name="country">
<option value="" selected="selected" disabled="disabled">Выберете вашу страну</option>
<option value="1">Первая страна</option>
<option value="2">Вторая страна</option>
<option value="3">Третья страна</option>
<option value="4">Четвертая страна</option>
<option value="5">Пятая страна</option>
<option value="6">Шестая страна</option>
<option value="7">Седьмая страна</option>
</select>
</td>
</tr>

Для создания такого выпадающего списка используется тег<select> с вложенными внутри него тегами<option>. Первый пункт списка будет использоваться в качестве заголовка всего выпадающего списка. В этом случае используют атрибут disabled, чтобы заблокировать его для выбора.

Строка «Загрузите фотографию» содержит значение file в атрибуте type.

Завершающий этап наше работы сделать две кнопки «Отправить» и «Сбросить». Сперва объединяем ячейки, располагаем кнопки по центру и не посредственно пишем следующий код.

<td colspan="2" align="center">
<button type="submit">
Отправить
</button>

В завершении выставляю свой код.

See the Pen YzPKrBL by Artem (@Polkovnik123) on CodePen.dark

Первый этап моего обучения окончен. html курсы для начинающих от компании Hexlet я закончил за 5 дней.