Кнопки в формах
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 45 из 60.
Кнопки играют ключевую роль в формах, где они помогают отправлять данные или сбрасывать поля. Давайте посмотрим, как они работают:
Кнопка отправки:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": Отправляет данные формы на сервер.
Кнопка сброса:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": Очищает все поля и сбрасывает их до значений по умолчанию.
Задание
ЛегкоСоздайте HTML-документ, который включает форму с различными типами кнопок. Форма должна содержать следующие элементы:
- Текстовое поле ввода с именем "message" и плейсхолдером "Enter your message".
- Добавьте кнопку отправки (
<button type="submit">) с текстом "Send". - Добавьте кнопку сброса (
<button type="reset">) с текстом "Clear". - Добавьте обычную кнопку (
<button>) с текстом "Click Me".
Шпаргалка
Кнопки в формах имеют различные типы для определенных функций:
Кнопка Submit:
<button type="submit">Submit</button>type="submit": Отправляет данные формы на сервер
Кнопка Reset:
<button type="reset">Reset</button>type="reset": Очищает все поля и сбрасывает их до значений по умолчанию
Обычная кнопка:
<button>Click Me</button>- Стандартная кнопка без специфического поведения в форме
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2