Урок 4: Работа с формами в HTML и стилизация форм с помощью CSS
Формы в HTML
Формы позволяют пользователям вводить и отправлять данные на сервер. Формы включают различные элементы, такие как текстовые поля, флажки, переключатели, выпадающие списки и кнопки.
Создание простой формы
Для создания формы используется элемент <form>. Внутри этого элемента размещаются различные элементы ввода данных.
Пример простой формы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример формы</title>
</head>
<body>
<h1>Простая форма</h1>
<form action="/submit" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>
В этом примере форма содержит два текстовых поля для ввода имени и email, а также кнопку отправки.
Элементы формы
Рассмотрим некоторые основные элементы формы:
<input type="text"> — текстовое поле.
<input type="email"> — поле для ввода email.
<input type="password"> — поле для ввода пароля.
<input type="checkbox"> — флажок.
<input type="radio"> — переключатель.
<textarea> — многострочное текстовое поле.
<select> и <option> — выпадающий список.
<button> — кнопка.
Пример использования различных элементов формы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Элементы формы</title>
</head>
<body>
<h1>Элементы формы</h1>
<form action="/submit" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password"><br><br>
<label for="bio">Биография:</label><br>
<textarea id="bio" name="bio"></textarea><br><br>
<label>
<input type="checkbox" name="subscribe" value="newsletter"> Подписаться на новости
</label><br><br>
<label>
<input type="radio" name="answer" value="yes"> Да
</label>
<label>
<input type="radio" name="answer" value="no"> Нет
</label><br><br>
<label for="country">Страна:</label>
<select id="country" name="country">
<option value="ru">Россия</option>
<option value="us">США</option>
<option value="uk">Великобритания</option>
</select><br><br>
<button type="submit">Отправить</button>
</form>
</body>
</html>
Стилизация форм с помощью CSS
Теперь применим стилизацию к нашей форме, чтобы она выглядела более привлекательно.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Стилизация форм</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: auto;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 10px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Стилизация форм</h1>
<form action="/submit" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">
<label for="password">Пароль:</label>
<input type="password" id="password" name="password">
<label for="bio">Биография:</label>
<textarea id="bio" name="bio"></textarea>
<label>
<input type="checkbox" name="subscribe" value="newsletter"> Подписаться на новости
</label>
<label>
<input type="radio" name="answer" value="yes"> Да
</label>
<label>
<input type="radio" name="answer" value="no"> Нет
</label>
<label for="country">Страна:</label>
<select id="country" name="country">
<option value="ru">Россия</option>
<option value="us">США</option>
<option value="uk">Великобритания</option>
</select>
<button type="submit">Отправить</button>
</form>
</body>
</html>
В этом примере мы применили следующие стили:
background-color, padding, border-radius, box-shadow и max-width для формы.
display, margin-bottom для меток <label>.
width, padding, margin-bottom, border и border-radius для полей ввода, текстовой области и выпадающего списка.
margin-right для флажков и переключателей.
background-color, color, padding, border, border-radius и cursor для кнопки.
background-color для кнопки при наведении (hover).
Заключение
В этом уроке мы рассмотрели создание и стилизацию форм в HTML и CSS. Формы играют ключевую роль в взаимодействии с пользователями, позволяя им вводить и отправлять данные на сервер. В следующем уроке мы изучим более сложные аспекты CSS, такие как позиционирование элементов и использование макетов.