Кнопка Подтверждения/Отправки
ФОРМЫ
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>Послать почту на ящик someone@example.com:</h3>
<form action="MAILTO:someone@example.com" 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> | Определяет кнопку |