Испытание: форма регистрации [11/18] проверка 3 страница

<tr>

<th rowspan="2">Браузер</th>

<th colspan="2">Посещения</th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

table {

border-collapse: collapse;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 10px;

border: 1px solid lightgray;

color: brown;

background-color: lightyellow;.

}

th {

padding: 10px;

border: 1px solid black;

color: darkblue;

background-color: lightcyan;

}

caption {

margin-bottom: 10px;

font-size: 18px;

}

Раскрашиваем строки [20/23]

В предыдущем задании вы раскрасили ячейки и ячейки-заголовки с помощью CSS. Если задавать стили для тега, например, th или td, то они применятся ко всем тегам. В нашем примере все ячейки окрасились в светло-жёлтый, а все ячейки-заголовки в светло-голубой.

Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки? Можно использовать классы и применять стили для этих классов. Например, вот так:

my-class { стили }

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

Table/table20.html

<!DOCTYPE html>

<html>

<head>

<title>Раскрашиваем строки</title>

<style>

.row-1 {

background-color: pink;

}

.row-2 {

background-color: lightgreen;

}

.row-3 {

background-color: lightblue;

}

table {

border-collapse: collapse;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 10px;

border: 1px solid lightgray;

}

th {

padding: 10px;

border: 1px solid black;

}

caption {

margin-bottom: 10px;

font-size: 18px;

}

</style>

</head>

<body>

<table>

<caption>Распределение браузеров</caption>

<tr>

<th rowspan="2">Браузер</th>

<th colspan="2">Посещения</th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<td>Mozilla Firefox</td>

</tr>

<td>Google Chrome</td>

</tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

Задаём размеры таблицы [21/23]

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

С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table { width: 100px; height: 100px;}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.

Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; илиheight: auto;.

Важное замечание. Проценты при задании высоты обычно не работают.

Испытание: итоговая таблица [23/23]

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

Сейчас осталось лишь подтвердить, что вы хорошо освоили материал. В образце, который вам надо сверстать, были использованы почти все приёмы из этого курса.

Небольшие подсказки:

1. Стили для body менять не надо.

2. Используемые цвета: darkcyan, lightblue, lightyellow, lightgray, black, white.

3. Ширина ячеек: 33%.

4. Размеры отступов кратны 5.

5. Цвет текста задаётся с помощью CSS-свойства color.

6. Тег caption использовать не нужно.

Table/table23.html

<!DOCTYPE html>

<html>

<head>

<title>Испытание: итоговая таблица</title>

</head>

<body>

<h1>Итоговая таблица</h1>

<style>

body {

width: 350px;

margin: 0;

padding: 0 10px;

font-size: 14px;

font-family: Arial, sans-serif;

}

table {

border-collapse: collapse;

}

th {

width:33%;

color: white;

border-top: 1px solid black;

border-bottom: 1px solid black;

padding: 10px;

}

.cell-1 {

background-color: darkcyan;

text-align:left;

}

.cell-2 {

background-color: lightblue;

text-align: center;

}

.cell-3 {

background-color: darkcyan;

text-align: right;

}

td {

padding: 10px;

}

.row-1 {

border-bottom: 1px solid lightgrey;

}

.row-2 {

background-color: lightyellow;

border-bottom: 1px solid lightgrey;

}

</style>

<table>

<tr>

<th class="cell-1">Город</th>

<th class="cell-2">Посещений</th>

</tr>

<tr>

</tr>

<tr>

<td class="row-2">Москва</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="2" class="row-2">Посещений за весь период</td>

</tr>

</table>

</body>

</html>

Знакомство с формами

Первая форма [1/18]

Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать: зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и так далее. В общем, формы в вебе просто необходимы.

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:

· action задаёт адрес, URL, отправки формы;

· method задаёт метод отправки формы.

Пример:

поля формы

</form>

Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:

https://www.google.com/search? q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

form / form 1. html

<!DOCTYPE html>

<html>

<head>

<style>

<h1 {

font-size: 18px;

}

</style>

</head>

<body>

<h1>Форма входа</h1>

<!-- Добавьте форму сюда->

</form>

</body>

</html>

Текстовое поле ввода [2/18]

Большинство полей форм создаётся с помощью одиночного тега input. У этого тега два обязательных атрибута:

· type задаёт тип поля;

· name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле. Он же используется по умолчанию. Пример:

</form>

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

form/ form2.html

Идентификатор и значение по умолчанию [3/18]

Атрибут id поля ввода обозначает идентификатор. Он должен быть уникальным не только в пределах формы, но и на всей странице.

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

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

Атрибут value задаёт значение поля ввода по умолчанию. Это тоже повышает удобство.

Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

Form/form3.html

<!DOCTYPE html>

<html>

<head>

<title>Идентификатор и значение по умолчанию</title>

<style>

h1 {

font-size: 18px;

}

</style>

</head>

<body>

<h1>Добавить в корзину</h1>

Количество <input type="text" name="total" id="total-field" value="5"> шт.

</form>

</body>

</html>

Подпись для поля ввода [4/18]

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

Подпись <input type="text" name="username">

На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label>

Подпись <input type="text" name="username">

</label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Связываем подпись и поле по id [5/18]

Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

1. Добавляем к полю ввода идентификатор с помощью атрибута id.

2. Оборачиваем текст подписи в тег <label>.

3. Добавляем тегу <label> атрибут for.

4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

<label for=" user-field-id ">Имя пользователя</label>

...

много-много других тегов

...

form/form5.html

<!DOCTYPE html>

<html>

<head>

<title>Связываем подпись и поле по id</title>

<style>

table {

border-collapse: collapse;

}

td {

padding: 10px;

border: 1px solid #ccc;

}

tr:nth-child(n+2) {

color: #ccc;

}

</style>

</head>

<body>

<h1>Форма входа</h1>

<table>

<tr>

<td>

Ваш логин

</label>

</td>

<td>

</td>

</tr>

<tr>

<td>Подпись</td>

<td>Другое поле</td>

</tr>

<tr>

<td>Кнопка отправки</td>

</tr>

</table>

</form>

</body>

</html>

Добавим ещё одно поле [6/18]

Мы могли бы связать поле и подпись, просто обернув их в тег <label>. Но в этом задании мы тренируем более сложный вариант — с использованием id и for.

form/form6.html

<!DOCTYPE html>

<html>

<head>

<title>Добавим ещё одно поле</title>

<style>

h1 {

font-size: 18px;

}

</style>

</head>

<body>

<h1>Форма входа</h1>

<label for="login-field">Ваш логин</label>

<!-- добавьте подпись сюда->Ваш пароль

</label>

<!-- добавьте поле сюда-><input type="text" name="password" id="password-field">

</form>

</body>

</html>

Поле для ввода пароля [7/18]

Мы создаём простую форму входа. Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.

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

Кнопка отправки формы [8/18]

Форма практически готова. Осталось добавить кнопку для отправки формы. Такая кнопка создаётся с помощью тега <input> c типом submit.

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

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

form/form8.html

<!DOCTYPE html>

<html>

<head>

<title>Кнопка отправки формы</title>

<style>

h1 {

font-size: 18px;

}

</style>dtyle>

</head>

<body>

<h1>Форма входа</h1>

<label for="login-field">Ваш логин</label>

<label for="password-field">Ваш пароль</label>

<!-- добавьте кнопку сюда->

</form>

</body>

</html>

Многострочное поле ввода [9/18]

Мы научились создавать простейшие формы с текстовыми полями и кнопками. А теперь познакомимся с более сложными элементами формы.

Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea>и является значением по умолчанию. Вот так:

<textarea>Значение по умолчанию</textarea>

form/form9.html

<!DOCTYPE html>

<html>

<head>

<title>Многострочное поле ввода</title>

<style>

input[type="submit"]

{

display: block;

margin-top: 10px;

}

</style>

</head>

<body>

<h1>Комментарии</h1>

<p>Список комментариев</p>

<p>Введите ваш комментарий:</p>

<textarea name="comment" id="comment-field" rows="10">Текст комментария

</textarea>

</form>

</body>

</html>

Чекбокс или «галочка» [10/18]

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:

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

form/form10.html

<!DOCTYPE html>

<html>

<head>

<title>Чекбокс или «галочка»</title>

<style>

input[type="submit"]

{

display: block;

margin-top: 10px;

}

</style>

</head>

<body>

<h1>Регистрация</h1>

<p>Множество полей</p>

<p>И как всегда в конце формы регистрации вопрос:</p>

<!-- добавьте поле сюда->

<label for="subscribe-field">Подписать вас на рассылку?</label>

</form>

</body>

</html>

Испытание: форма регистрации [11/18] проверка

Создайте простейшую форму регистрации с использованием уже изученных полей.

Подсказки:

· Вам нужно размечать только HTML-код.

· Для переноса полей на новую строку используйте обычный <br>.

· Ширину полей задавать не нужно, в частности cols у многострочного поля.

· Высоту многострочного поля подберите с помощью rows.

Так как поля форм могут очень сильно отличаться от системы к системе, то ориентируйтесь по вкладкам «Образец» и «Различия», где показано как наш сервер видит вашу форму.

файл form/ form11.html

<!DOCTYPE html>

<html>

<head>

<title>Испытание: форма регистрации</title>

<style>

html, body {

margin: 0;

padding: 0;

}

body {

width: 350px;

padding: 10px 20px;

color: black;

font-family: Arial, sans-serif;

font-size: 14px;

line-height: 1.5;

}

h1 {

margin: 0;

}

</style>

</head>

<body>

<h1>Регистрация</h1>

Ваш логин (email):<br>

Пароль:<br>

Информация о себе:<br>

</textarea><br>

Подписаться на рассылку<br>

</form>

</body>

</html>

Переключатель или «радиобаттон» [12/18]

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.

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

В этом задании мы начнём создавать переключатель.

form/form12.html

<!DOCTYPE html>

<html>

<head>

<title>Переключатель или «радиобаттон»</title>

<style>

input[type="submit"] {

display: block;

margin-top: 10px;

}

</style>

</head>

<body>

<p>В тестах часто встречаются задания типа «выберите один из предложенных вариантов».</p>

<p><i>Какой тег обозначает «абзац»?</i></p>

<label>