Кнопка Подтверждения/Отправки

ФОРМЫ

HTML Формы используются для различных форм ввода пользовательской информации.

Создание текстовых полей

<html>

<body>

<form action="">

Имя: <input type="text" name="firstname" /><br />

Фамилия: <input type="text" name="lastname" />

</form>

<p><b>Замечание:</b> Форма сама по себе не видима. Также отметьте, что ширина текстового поля ввода равна 20 символов по умолчанию.</p>

</body>

</html>

Создание поля ввода пароля Как создать поле для ввода пароля.

<html>

<body>

<form action="">

Имя: <input type="text" name="user" /><br />

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

</form>

<p><b>Замечание:</b> Символы в поле ввода пароля маскируются (отображаются как звездочки или как окружности).</p>

</body>

</html>

HTML формы используются для передачи данных на сервер.

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

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

<form> . элементы ввода . </form>

HTML Формы - Элемент Ввода

Наиболее важный элемент формы - элемент ввода.

Элемент ввода используется для ввода пользовательской информации.

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

Наиболее используемые типы ввода описаны ниже.

Текстовые Поля

<input type="text" /> определяет однострочное текстовое поле ввода, в которое пользователь может вводить текстовую информацию:

<form> Имя: <input type="text" name="firstname" /><br /> Фамилия: <input type="text" name="lastname" /> </form>

Как HTML код выше выглядит в браузере:

Начало формы

Имя:
Фамилия:

Конец формы

Замечание: Форма сама по себе не видима. Также отметьте что ширина текстового поля по умолчанию равна 20 символов.

Поле Ввода Пароля

<input type="password" /> определяет поле ввода пароля:

<form> Пароль: <input type="password" name="pwd" /> </form>

Как HTML код выше выглядит в браузере:

Начало формы

Пароль:

Конец формы

Замечание: Символы в поле ввода пароля маскируются (отображаются как звездочки или кружочки).

Переключатели

<input type="radio" /> определяет радио кнопку. Радио кнопки позволяют пользователю выбирать ТОЛЬКО ОДИН из ограниченного числа вариантов:

<form> <input type="radio" name="sex" value="male" /> Мужской<br /> <input type="radio" name="sex" value="female" /> Женский </form>

Как HTML код выше будет выглядеть в браузере:

Начало формы

Мужской
Женский

Конец формы

Флажки

<input type="checkbox" /> определяет флажок. Флажки позволяют пользователю выбрать ОДНУ или БОЛЕЕ опций из ограниченного числа вариантов.

<form> <input type="checkbox" name="vehicle" value="bike" /> У меня есть мотоцикл <br /> <input type="checkbox" name="vehicle" value="car" /> У меня есть автомобиль </form>

Как HTML код выше будет выглядеть в браузере:

Начало формы

У меня есть мотоцикл
У меня есть автомобиль

Конец формы

Кнопка Подтверждения/Отправки

<input type="submit" /> определяет кнопку подтверждения (отправки).

Кнопка подтверждения используется для отправки данных на сервер. Данные отправляются на страницу указанную в атрибуте формы action. Файл указанный в атрибуте action обычно делает что либо с полученными данными:

<form name="input" action="http://Uroki-HTML.ru/html_form_action.php" method="get"> Имя пользователя: <input type="text" name="user" /> <input type="submit" value="Отправить" /> </form>

Как HTML код выше будет выглядеть в браузере:

Начало формы

Имя пользователя:

Конец формы

Если вы напечатаете некоторые символы в текстовом поле сверху и кликните на кнопке "Отправить", браузер пошлет введенные вами данные на страницу "html_form_action.php". Эта страница покажет вам то, что вы ввели.

Примеры

Переключатели

<html>

<body>

<form action="">

<input type="radio" name="sex" value="male" /> Мужской<br />

<input type="radio" name="sex" value="female" /> Женский

</form>

<p><b>Замечание:</b> Когда пользователь кликает на переключателе, он становится выбранным, и все остальные переключатели с тем же именем (атрибут name) сбрасываются.</p>

</body>

</html>

Флажки

<html>

<body>

<form action="">

<input type="checkbox" name="vehicle" value="Bike" /> У меня есть мотоцикл<br />

<input type="checkbox" name="vehicle" value="Car" /> У меня есть машина

</form>

</body>

</html>

Простой раскрывающийся список

<html>

<body>

<form action="">

<select name="cars">

<option value="volvo">Форд</option>

<option value="saab">Тойота</option>

<option value="fiat">Фиат</option>

<option value="audi">Ауди</option>

</select>

</form>

</body>

</html>

Раскрывающийся список с предварительно выбранным значением

<html>

<body>

<form action="">

<select name="cars">

<option value="volvo">Форд</option>

<option value="saab">Тойота</option>

<option value="fiat" selected="selected">Фиат</option>

<option value="audi">Ауди</option>

</select>

</form>

</body>

</html>

Текстовая область

Как создать многострочную область для ввода текста, куда пользователь может ввести неограниченное количество символов.

<html>

<body>

<p>

Возможно пример не будет работать должным образом, если ваш браузер не позволяет вставлять одну текстовую область в другую,

т.к. наш редактор использует текстовую область для ввода исходного кода.

</p>

<textarea rows="4" cols="25">

На уроках HTML вы найдете исчерпывающий материал по языку разметки HTML,

изучив который, вы сможете создавать HTML страницы и сделать свой собственный веб сайт.

Создание кнопки

<html>

<body>

<form action="">

<input type="button" value="Привет мир!">

</form>

</body>

</html>

Примеры Форм

Группировка элементов ввода формы Как создать границу вокруг элементов формы

<html>

<body>

<form action="">

<fieldset>

<legend>Персональная информация:</legend>

Имя: <input type="text" size="30" /><br />

Почта: <input type="text" size="30" /><br />

Дата рождения: <input type="text" size="10" />

</fieldset>

</form>

</body>

</html>

Форма с текстовыми полями и кнопкой подтверждения/отправки

Как создать форму с двумя текстовыми полями и кнопкой отправки данных.

<html>

<body>

<form name="input" action="html_form_action.php" method="get">

Имя: <input type="text" name="FirstName" value="Микки" /><br />

Фамилия: <input type="text" name="LastName" value="Маус" /><br />

<input type="submit" value="Отправить" />

</form>

<p>Если вы нажмете на кнопку "Отправить", данные с формы будут посланы на страницу "html_form_action.php".</p>

</body>

</html>

Форма с флажками

Как создать форму с двумя флажками и кнопкой отправки данных.

<html>

<body>

<form name="input" action="html_form_action.php" method="get">

<input type="checkbox" name="vehicle1" value="Bike" /> У меня есть мотоцикл<br />

<input type="checkbox" name="vehicle2" value="Car" /> У меня есть машина

<br /><br />

<input type="submit" value="Отправить" />

</form>

<p>Если вы нажмете на кнопку "Отправить", данные с формы будут посланы на страницу "html_form_action.php".</p>

</body>

</html>

Форма с переключателями

Как создать форму с двумя переключателями и кнопкой отправки данных.

<html>

<body>

<form name="input" action="html_form_action.php" method="get">

<input type="radio" name="sex" value="male" /> Мужской<br />

<input type="radio" name="sex" value="female" /> Женский<br />

<input type="submit" value="Отправить" />

</form>

<p>Если вы нажмете на кнопку "Отправить", данные с формы будут посланы на страницу "html_form_action.php".</p>

</body>

</html>

Отправка электронной почты из формы

Как отправлять электронную почту их форм

<html>

<body>

<h3>Послать почту на ящик [email protected]:</h3>

<form action="MAILTO:[email protected]" method="post" enctype="text/plain">

Имя:<br />

<input type="text" name="name" value="ваше имя" /><br />

E-mail:<br />

<input type="text" name="mail" value="ваш e-mail" /><br />

Комментарий:<br />

<input type="text" name="comment" value="ваш комментарий" size="50" />

<br /><br />

<input type="submit" value="Послать">

<input type="reset" value="Сбросить">

</form>

</body>

</html>

HTML Теги Форм

Тег Описание
<form> Определяет форму для ввода пользовательских данных
<input> Определяет элемент ввода
<textarea> Определяет многострочную текстовую область ввода
<label> Определяет метку (подпись) для элемента ввода
<fieldset> Определяет границу вокруг элементов ввода формы
<legend> Определяет заголовок для элемента группировки fieldset
<select> Определяет список выбора (раскрывающийся список)
<optgroup> Определяет группу связанных опций в списке выбора
<option> Определяет опцию в списке выбора
<button> Определяет кнопку

Наши рекомендации