Форми HTML | HTML для дітей

Зміст:

Різноманіття форм

Реєстрація на сайті ? Щось купуємо чи замовляємо? В цьому допоможуть форми, які можна стоворити на HTML сторінці. Хотілось написано “легко сторити”, але дозволю вам самим визначити, чи легко це, бо коду буде багато, готуйтесь! Форми – це кращий спосіб передати інформацію про себе і свої побажання власникам html-сайту. Ми навчимося створювати основні поля на формі, поговоримо про те, що додавати на форму, щоб вона була максимально ефективна. Тож, поїхали!

форма реєстрації
Форма мобільного оператора
Форма – лист до Санти

Форма дозволяє взаємодіяти з користувачем. Зазвичай він вводить в поля потрібну інформацію і відправляє на сервер. Різноманіття полів для форм дозволяє швидко заповнювати їх і навіть оберігає від помилок. Приміром в поле “Дата” можна ввести лише дату, а не рядок чи інший символ. З деякими основними полями ми познайомимося впродовж уроку, а як вони виглядають можна глянути тут :

Що будемо робити?

Перед початком, хочу вас познайомити з українським стартапом, який створив спеціальний пристрій для того, щоб наглядати за своїми улюбленцями, коли ви не вдома.

Пристрій обладнаний камерою і мікрофоном, тому можна не тільки побачити, що робить ваш собака чи кіт, а й сказати йому щось. Також в пристрої є смаколики і ігри. Наприклад лазерна точка, якою ви управляєте, а собака може поганятися. Також пристрій обладнаний для видачі винагороди песику за гарну поведінку.
А ще ця компанія створила спеціальний нашийник, щоб собачка не губилася, щоб знайти друга в темряві чи коли він загубився:

Так от, в прикладі буде спрощена форма якраз для такої програми. Хоч ви можете обрати й іншу тему для форми. Головне, щоб вийшло створити всі види елементів.

Це може бути форма реєстрації, форма для друзів або для покупки морозива. Ось такий приклад вийшов у мене:

Практика

Input text

1: Створіть новий проєкт. Додайте заголовок форми:

<h2>PetCube</h2>

2: Перший тип полів дозволяє вводити короткий текст. Тег form створює заготовку для форми. Всі поля мають бути в середині цього тега. Тег label – це підпис, він ще не раз нам зустрінеться. Тег input – поле вводу. В нашу першому прикладі type=”text“ отже вводимо текст.

<form>
  <label>Ім'я власника:</label><br>
  <input type="text" id="fname" name="fname" placeholder="Введіть ім'я"><br>
  <label>Ім'я улюбленця:</label><br>
  <input type="text" id="lname" name="lname" placeholder="Введіть ім'я улюбленця"><br>

<!-- Тут буде весь код форми -->

</form>

Атрибут placeholder – це підпис до поля вводу, щоб підказати користувачу, що вводити. Атрибути id та name допоможуть писати код обробки форми. Ми писати його не будемо, сьогодні тільки навчимося показувати форму, але для того, щоб вона реально запрацювала і треба ці поля.

2: Давайте додамо трохи стилів, щоб форма розташувалася посередині. Спробуйте поставити свої кольори й трохи змінити стилі під вашу майбутню форму.

form {
  background-color: #4dffc3;
  width: 50%;
  margin-left: 25%;
  padding: 10px;
  color: #016b48;
}
h2 {
  text-align: center;
  background-color: #03fca5;
  color: #016b48;
}

Select

3: Наступний тип поля select. Він потрібний, щоб обрати один з кількох варіантів і списку-випадайці. Ми обиратимемо вид тваринки:

  <select name="pets" id="petselect">
    <option value="">--Оберіть тип улюбленця--</option>
    <option value="dog">Собака</option>
    <option value="cat">Котик</option>
    <option value="hamster">Хом'як</option>
    <option value="parrot">Папуга</option>
    <option value="raccoon">Єнот</option>
    <option value="spider">Павук</option>
    <option value="goldfish">Золота рибка</option>
  </select>
  <br>

Іnput type=”radio”

4: Поле іnput type=”radio” також дозволяє обрати тільки один з запропонованих варіантів. Але розташовує всі варіанти на формі. Ми оберемо дію : включити онлайн камеру, подивитися статистику про активність або програти з улюбленцем:

  <h3>Оберіть дію:</h3>
  <input type="radio" id="camera" name="action" value="camera">
  <label>Включити онлайн камеру</label><br>
  <input type="radio" id="data" name="action" value="data">
  <label>Подивитися дані про активність</label><br>
  <input type="radio" id="play" name="action" value="play">
  <label>Пограти</label>
  <br>

Іnput type=”checkbox“

4: Поле іnput type=”checkbox” допомагає обрати кілька варіантів з запропонованих.

  <h3>Оберіть опцію:</h3>
  <input type="checkbox" id="gps" name="option" value="gps">
  <label>Включити GPS-трекер</label><br>
  <input type="checkbox" id="fence" name="option" value="fence">
  <label>Поставити віртуальний паркан</label><br>
  <input type="checkbox" id="find" name="option" value="find">
  <label>Знайти улюбленця</label><br>
  <input type="checkbox" id="light" name="option" value="light">
  <label>Включити нічну підствітку</label><br>
  <br>

Textarea

5: Поле textarea потрібно для того, щоб ввести великий текст. Атрибути rows=”10″ та cols=”30″ задають його ширину і висоту (спробуйте їх змінити)

  <h3>Дані про улюбленця:</h3>
  <textarea name="message" rows="10" cols="30">
</textarea>
  <br>

Button

6: І останнім в нашій формі буде елемент button – кнопка. Ми не будемо розбирати javascript, наша кнопка просто видасть коротке повідомлення:

 <button type="button" onclick="alert('Гав!!')">Ок</button>

Level Up

1: Підключіть бібліотеку зі стилями на самому початку html-файлу:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

2: Роздивіться приклади на цій сторінці. Додайте до своєї форми атрибут class з відповідними значеннями, щоб поля стали схожими на ті, що на сторінці.

3: Оновіть відображення кнопки за допомогою цієї сторінки. Можете створити 2-3 кнопки й застосувати різні властивості до кожної з них

12. Форми у HTML