Создание вашей первой формы

Тег <form> используется для создания формы - это выглядит так:

<form>
	Input elements
</form>

Тэг <form> содержит в себе содержимое вашей формы. Это содержимое называется виджетами, элементами управления или полями - все они описывают одно и то же. Это содержимое в основном разных видов (или состояний, которое на самом деле является правильным словом) полей ввода и кнопки. Давайте рассмотрим очень простую форму с двумя полями ввода и кнопкой отправки:

<form>
	First name: <input type="text" name="firstname" /> <br />
	Surname: <input type="text" name="surname" /> <br />
	<input type="submit" value="Submit now" />
</form>

Как видите, поля ввода определяются элементом <input>. Элемент ввода представляет собой типизированное поле данных, которое пользователь может редактировать. Атрибут type определяет, какое состояние ввода вы используете, в данном случае это обычный текстовый элемент, а атрибут name обозначает отдельные поля ввода. Атрибут type является главным переключателем, который определяет, что на самом деле является элементом ввода.

Кнопка также определяется с помощью элемента <input>, но значением атрибута type является «submit», а не «text» в двух предыдущих полях, и это указывает на то, что это кнопка отправки. Кнопка отправки имеет дополнительный атрибут value. Значение атрибута value определяет то, что кнопка собирается сказать, и для нашего примера я выбираю «Отправить сейчас».
Как вы, наверное, уже заметили, элемент <input> является пустым элементом и поэтому он самозакрывающийся, используя / в конце.

Совет!

Всегда приятно, когда у вас есть возможность сократить разметку без ущерба для качества, и у вас есть возможность, когда вы создаете обычные поля ввода текста в форме. Вы можете опустить атрибут type, и браузер автоматически интерпретирует поле ввода как обычное текстовое поле. Это означает, что два следующих элемента ввода обрабатываются одинаково:

<input type="text" />
<input />