Создание HTML-форм: полное руководство от основ до мастерства

<form action="/submit-form" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Отправить">
</form>

<form action="/register" method="post">
<div>
<label for="name">Имя:</label>
<input type="text" id="name" name="user_name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="user_email" required>
</div>
<div>
<label for="password">Пароль:</label>
<input type="password" id="password" name="user_password" required>
</div>
<button type="submit">Зарегистрироваться</button>
</form>

<form action="/submit-survey" method="post" enctype="multipart/form-data">
<!-- Текстовое поле -->
<div>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" placeholder="Введите ваше имя">
</div>

<!-- Email поле -->
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@domain.com">
</div>

<!-- Числовое поле -->
<div>
<label for="age">Возраст:</label>
<input type="number" id="age" name="age" min="18" max="120">
</div>

<!-- Дата -->
<div>
<label for="birthdate">Дата рождения:</label>
<input type="date" id="birthdate" name="birthdate">
</div>

<!-- Радио-кнопки -->
<div>
<p>Пол:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Мужской</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Женский</label>
</div>

<!-- Чекбоксы -->
<div>
<p>Интересы:</p>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Программирование</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Музыка</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Спорт</label>
</div>

<!-- Выпадающий список -->
<div>
<label for="country">Страна:</label>
<select id="country" name="country">
<option value="">Выберите страну</option>
<option value="ru">Россия</option>
<option value="kz">Казахстан</option>
<option value="by">Беларусь</option>
</select>
</div>

<!-- Текстовая область -->
<div>
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</div>

<!-- Загрузка файла -->
<div>
<label for="photo">Загрузите фото:</label>
<input type="file" id="photo" name="photo" accept="image/*">
</div>

<!-- Кнопка отправки -->
<div>
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>
</div>
</form>

<form action="/submit" method="post">
<fieldset>
<legend>Персональная информация</legend>
<div>
<label for="firstname">Имя:</label>
<input type="text" id="firstname" name="firstname">
</div>
<div>
<label for="lastname">Фамилия:</label>
<input type="text" id="lastname" name="lastname">
</div>
<div>
<label for="dob">Дата рождения:</label>
<input type="date" id="dob" name="dob">
</div>
</fieldset>

<fieldset>
<legend>Контактная информация</legend>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}">
</div>
</fieldset>

<button type="submit">Отправить</button>
</form>

<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">

<label>
Имя пользователя: 
<input type="text" name="username">
</label>

<form id="multi-step-form" action="/submit" method="post">
<!-- Шаг 1 -->
<div class="form-step" id="step1">
<h3>Шаг 1: Основная информация</h3>
<div>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<button type="button" onclick="nextStep(1, 2)">Далее</button>
</div>

<!-- Шаг 2 -->
<div class="form-step" id="step2" style="display:none">
<h3>Шаг 2: Дополнительные данные</h3>
<div>
<label for="age">Возраст:</label>
<input type="number" id="age" name="age" min="18">
</div>
<div>
<label for="occupation">Профессия:</label>
<input type="text" id="occupation" name="occupation">
</div>
<button type="button" onclick="prevStep(2, 1)">Назад</button>
<button type="button" onclick="nextStep(2, 3)">Далее</button>
</div>

<!-- Шаг 3 -->
<div class="form-step" id="step3" style="display:none">
<h3>Шаг 3: Завершение</h3>
<div>
<label for="comments">Комментарии:</label>
<textarea id="comments" name="comments"></textarea>
</div>
<button type="button" onclick="prevStep(3, 2)">Назад</button>
<button type="submit">Отправить</button>
</div>
</form>

function nextStep(current, next) {
document.getElementById('step' + current).style.display = 'none';
document.getElementById('step' + next).style.display = 'block';
}

function prevStep(current, prev) {
document.getElementById('step' + current).style.display = 'none';
document.getElementById('step' + prev).style.display = 'block';
}

<form action="/submit" method="post" novalidate>
<div>
<label for="username">Имя пользователя (только буквы, 3-16 символов):</label>
<input type="text" id="username" name="username" 
required 
pattern="[A-Za-z]{3,16}" 
title="Имя пользователя должно содержать только буквы и быть длиной от 3 до 16 символов">
</div>

<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>

<div>
<label for="password">Пароль (минимум 8 символов):</label>
<input type="password" id="password" name="password" 
required 
minlength="8" 
title="Пароль должен содержать минимум 8 символов">
</div>

<div>
<label for="age">Возраст (18-120):</label>
<input type="number" id="age" name="age" 
min="18" 
max="120" 
title="Укажите возраст от 18 до 120 лет">
</div>

<div>
<label for="phone">Телефон (формат: XXX-XXX-XXXX):</label>
<input type="tel" id="phone" name="phone" 
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
title="Телефон в формате: XXX-XXX-XXXX">
</div>

<div>
<label for="website">Веб-сайт:</label>
<input type="url" id="website" name="website">
</div>

<button type="submit">Отправить</button>
</form>

<form id="myForm" onsubmit="return validateForm()" action="/submit" method="post">
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span id="emailError" class="error"></span>
</div>

<div>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<span id="passwordError" class="error"></span>
</div>

<div>
<label for="confirm-password">Подтвердите пароль:</label>
<input type="password" id="confirm-password" name="confirm-password" required>
<span id="confirmError" class="error"></span>
</div>

<button type="submit">Зарегистрироваться</button>
</form>

<script>
function validateForm() {
let isValid = true;
const email = document.getElementById('email');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirm-password');

// Очистка предыдущих ошибок
document.getElementById('emailError').textContent = '';
document.getElementById('passwordError').textContent = '';
document.getElementById('confirmError').textContent = '';

// Проверка email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email.value)) {
document.getElementById('emailError').textContent = 'Введите корректный email';
isValid = false;
}

// Проверка пароля
if (password.value.length < 8) {
document.getElementById('passwordError').textContent = 'Пароль должен содержать минимум 8 символов';
isValid = false;
}

// Проверка совпадения паролей
if (password.value !== confirmPassword.value) {
document.getElementById('confirmError').textContent = 'Пароли не совпадают';
isValid = false;
}

return isValid;
}
</script>

<form action="/search" method="get">
<label for="query">Поисковый запрос:</label>
<input type="text" id="query" name="q">

<label for="category">Категория:</label>
<select id="category" name="cat">
<option value="all">Все категории</option>
<option value="news">Новости</option>
<option value="blogs">Блоги</option>
</select>

<button type="submit">Найти</button>
</form>

<form action="/login" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required>

<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Войти</button>
</form>

<form action="/upload" method="post" enctype="multipart/form-data">
<label for="profile-picture">Выберите изображение профиля:</label>
<input type="file" id="profile-picture" name="profile-picture" accept="image/*">

<label for="document">Загрузите документ:</label>
<input type="file" id="document" name="document" accept=".pdf,.doc,.docx">

<button type="submit">Загрузить</button>
</form>

<form id="contactForm">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Сообщение:</label>
<textarea id="message" name="message" required></textarea>

<button type="submit">Отправить</button>
<div id="formStatus"></div>
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault(); // Предотвращаем стандартную отправку формы

const formData = new FormData(this);

fetch('/submit-contact', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
document.getElementById('formStatus').innerHTML = 
'Форма успешно отправлена! Мы свяжемся с вами в ближайшее время.';
document.getElementById('contactForm').reset();
})
.catch(error => {
document.getElementById('formStatus').innerHTML = 
'Произошла ошибка при отправке формы. Пожалуйста, попробуйте еще раз.';
console.error('Error:', error);
});
});
</script>