Створення форм і гіперпосилань

Форма HTML використовується для збору даних, введених користувачем. Введені користувачем дані найчастіше надсилаються на сервер для обробки.

Елемент <form>

HTML елемент <form> визначає форму, яка використовується для збору користувацького вводу:

<form>
.
елементи форми
.
</form>

HTML-форма містить елементи форми.

Елементи форми - це різні типи елементів вводу, такі як текстові поля, прапорці, перемикачі, кнопки надсилання тощо.

Елемент <input>

Елемент <input> є найбільш важливим елементом форми.

Елемент <input> може відображатися кількома способами, в залежності від атрибута type.

Ось кілька прикладів:

Введення тексту

<input type='text'> визначає однорядкове поле вводу для введення тексту - text input:

Приклад:

<form>
Ім’я:<br>
<input type='text' name='firstname'><br>
Прізвище:<br>
<input type='text' name='lastname'>
</form>

Ось так це буде виглядати в браузері:

Радіо кнопка введення

<input type='radio'> визначає радіокнопку.

Перемикачі (радіокнопки) дозволяють користувачу обрати ОДИН з обмеженної кількості варіантів:

Приклад:

<form>
<input type='radio' name='gender" value='male' checked> Чоловіча<br>
<input type='radio' name='gender' value='female'> Жіноча<br>
<input type='radio' name='gender' value='other'> Інше
</form>

Ось як HTML-код вище буде відображатися в браузері:

Кнопка Submit / Надіслати

<input type='submit'> визначає кнопку для надсилання даних форми в обробник форм.

Обробник форм зазвичай являє собою серверну сторінку зі скриптом для обробки вхідних даних.

Обробник форми вказується в атрибуті action форми:

Приклад

<form action='/action_page.html'>
Ім’я:<br>
<input type='text' name='firstname' value='Mickey'><br>
Прізвище:<br>
<input type='text' name='lastname' value='Mouse'><br><br>
<input type='submit' value='Надіслати'>
</form>

Ось як HTML-код вище буде відображатися в браузері:

Зовнішній вигляд HTML-форми може бути значно покращено за допомогою CSS:

Стилізація полів введення (input)

Використовуйте властивість width щоб визначити ширину поля введення:

Приклад:

input {
width: 100%;
}

Наведений вище приклад відноситься до всіх елементів <input>. Якщо ви хочете стилізувати лише визначений тип введення, ви можете використовувати атрибути селекторів:

• input[type=text] - обере лише текстові поля

• input[type=password] - обере лише поля пароля

• input[type=number] - обере лише числові поля

• і т.д.

Простір всередині та зовні поля Input

Використовуйте властивість padding щоб додати простір всередині текстового поля.

Порада: Якщо у вас багато полів input, що розташовуються один за одним, ви також можете додати трохи margin, щоб додати більший відступ між ними:

Приклад:

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

Поля Input з межами

Використовуйте властивість border, щоб змінити розмір і колір межі, та використовуйте властивість border-radius, щоб додати округлі кути:

Приклад

input[type=text] {
border: 2px solid red;
border-radius: 4px;
}

Кольорові поля Input

Використовуйте властивість background-color, щоб додати колір фону для input, і властивість color, щоб змінити колір тексту:

Приклад:

input[type=text] {
background-color: #3CBC8D;
color: white;
}

HTML Посилання

HTML посилання - це гіперпосилання.

Ви можете натиснути на посилання і перейти до іншого документу.

При наведенні миші на посилання стрілка миші перетвориться в маленьку стрілку.

Примітка: Посилання не обов'язково повинно бути текстовим. Посиланням може бути зображення або будь-який інший HTML елемент.

Гіперпосилання визначаються за допомогою HTML тега <a> (від слова anchor - якір):

<a href="url">Текст посилання</a>

Наприклад:

<a href="https://tpkpvfp.org.ua/">Тернопільський професійний коледж</a>

Атрибут href вказує адресу призначення посилання (https://tpkpvfp.org.ua/).

Текст посилання є видимою частиною (Тернопільський професійний коледж).

Стилізація посилань

Посилання можуть бути оформлені за допомогою будь-якої CSS-властивості (наприклад, color, font-family, background і т.д.).

Приклад:

a {
color: hotpink;
}

Крім того, посилання можуть бути оформлені по-різному в залежності від того, в якому стані вони знаходяться.

Чотири стани посилань:

• a:link - звичайне, не відвідуване посилання

• a:visited - посилання, яке вже відвідав користувач

• a:hover - посилання, коли користувач наводить на нього курсор миші

• a:active - посилання в той момент, коли воно натиснуте (активне)

Приклад:

/ невідвідуване посилання /
a:link {
color: red;
}

/ відвідуване посилання /
a:visited {
color: green;
}

/ посилання при наведенні миші /
a:hover {
color: hotpink;
}

/ активне посилання /
a:active {
color: blue;
}

При налаштуванні стилю для кількох станів посилань існують деякі правила порядку:

• a:hover ПОВИНЕН слідувати після a:link та a:visited

• a:active ПОВИНЕН слідувати після a:hover

Кнопки-посилання

Цей приклад демонструє більш складний приклад, де об’єднуються кілька властивостей CSS для відображення посилань у вигляді блоків / кнопок:

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}