Формы HTML

Формы HTML необходимы когда вы хотите собрать некоторые данные от посетителя места. Например во время регистрации пользователя вы хотел были бы к собирать данным как имя, адрес электронной почты, кредитная карточка, etc.

Форма примет входной сигнал от посетителя места и после этого вывесит ее к конечный применению как CGI, сценарий ASP или сценарий etc. PHP конечное применение выполнит необходимый обрабатывать на переданных данных основал на определенной логике дела внутри применения.

Различные элементы формы доступные как поля текста, поля textarea, раскрывающееся меню, кнопки с зависимой фиксацией, флажки, etc.

Бирка <form> HTML использована для того чтобы создать форму HTML и она имеет следующий синтаксис:

<form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
</form>

Сформируйте атрибуты

Отдельно от общих атрибутов, следование список наиболее часто используемых атрибутов формы:

АтрибутОписание
действиеBackend сценарий готовый для того чтобы обрабатывать ваши переданные данные.
методМетод, котор нужно использовать для того чтобы загрузить данные. Наиболее часто используемые ПОЛУЧАЮТ и ВЫВЕШИВАЮТ методы.
цельОпределите окно или рамку цели где будет показан результат сценария. Он принимает значения как _blank, _self, _parent etc.
enctype

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

  • application/x-www-form-urlencoded - Это стандартный метод большинств польза форм в простых сценариях.

  • mutlipart/форм-данные - это использовано когда вы хотите загрузить бинарные данные в форме архивов как изображение, архив etc. слова

Примечание: Вы можете сослаться к Perl & CGI для детали на как upload данным по формы работает.

Управления формы HTML

Разные виды управлений формы которые вы можете использовать для того чтобы собрать данные используя форму HTML:

  • Управления входного сигнала текста

  • Управления флажков

  • Управления коробки Рейдио

  • Выберите управления коробки

  • Храньте отборные коробки

  • Спрятанное управление

  • Clickable кнопки

  • Представьте и кнопка возврата

Управления входного сигнала текста

3 типа входного сигнала текста используемого на формах:

  • Одностроковые управления входного сигнала текста - это управление использовано для деталей которые требуют только одной линии входного сигнала потребителя, как коробки поиска или имена. Они созданы используя бирку <input> HTML.

  • Пароль input управление - это также одностроковой входной сигнал текста но оно маскирует характер как только потребитель входит в его. Они также созданы используя бирку <input> HTML.

  • Многополосные управления входного сигнала текста - это использовано когда потребованы, что дает потребитель детали которые могут быть более длинни чем одиночно предложения. Многополосные управления входного сигнала созданы используя бирку <textarea> HTML.

Одностроковые управления входного сигнала текста

Это управление использовано для деталей которые требуют только одной линии входного сигнала потребителя, как коробки поиска или имена. Они созданы используя бирку <input> HTML.

Пример

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

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name:  <input type="text" name="first_name" />
<br>
Last name:  <input type="text" name="last_name" />
</form>
</body>
</html>

Это даст следующий:

First name:
Last name:

Атрибуты

Следование список атрибутов для бирки <input> для создавать поле текста.

АтрибутОписание
типПоказывает тип управления входного сигнала и для управления входного сигнала текста оно будет установлен к тексту.
имяИспользовано для того чтобы дать имя к управлению которое послано к серверу и для того чтобы получить значение.
значениеЭто можно использовать для предусмотрения исходной величины внутри управления.
размерПозволяет определить ширину управления текст-входного сигнала оперируя понятиями характеров.
maxlengthПозволяет определить максимальное число характеров потребитель может вписать в текстовое поле.

Управления входного сигнала пароля

Это также одностроковой входной сигнал текста но оно маскирует характер как только потребитель входит в его. Они также созданы используя бирку <input> HTML но тип атрибут установлен к паролю.

Пример

Здесь основной пример однострокового входного сигнала пароля используемого для того чтобы принять пароль потребителя:

<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID :  <input type="text" name="user_id" />
<br>
Password:  <input type="password" name="password" />
</form>
</body>
</html>

Это даст следующий:

User ID :  
Password:

Атрибуты

Следование список атрибутов для бирки <input> для создавать поле пароля.

АтрибутОписание
типПоказывает что тип управления входного сигнала и для пароля input управление он будет установлен к паролю.
имяИспользовано для того чтобы дать имя к управлению которое послано к серверу и для того чтобы получить значение.
значениеЭто можно использовать для предусмотрения исходной величины внутри управления.
размерПозволяет определить ширину управления текст-входного сигнала оперируя понятиями характеров.
maxlengthПозволяет определить максимальное число характеров потребитель может вписать в текстовое поле.

Многономенклатурные управления входного сигнала текста

Это использовано когда потребованы, что дает потребитель детали которые могут быть более длинни чем одиночно предложения. Многополосные управления входного сигнала созданы используя бирку <textarea> HTML.

Пример

Здесь основной пример многополосного входного сигнала текста используемого для того чтобы принять описание деталя:

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>

Это даст следующий:

Description :

Атрибуты

Следование список атрибутов для бирки <textarea>.

АтрибутОписание
имяИспользовано для того чтобы дать имя к управлению которое послано к серверу и для того чтобы получить значение.
рядкиПоказывает число рядков коробки текстового участка.
colsПоказывает число колонок коробки текстового участка

Управление флажка

Флажки использованы когда больше чем необходим, что выбран один вариант. Они также созданы используя бирку <input> HTML но тип атрибут установлен к флажку.

Пример

Здесь Код HTML примера для формы с 2 флажками:

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>

Это даст следующий:

Maths Physics

Атрибуты

Следование список атрибутов для бирки <checkbox>.

АтрибутОписание
типПоказывает что тип управления входного сигнала и для флажка input управление он будет установлен к флажку.
имяИспользовано для того чтобы дать имя к управлению которое послано к серверу и для того чтобы получить значение.
значениеЗначение которое будет использовано если флажок выбран.
провереноУстановите проверено если вы хотите выбрать его значением по умолчанию.

Управление кнопки с зависимой фиксацией

Использованы необходимы, что выбраны кнопки с зависимой фиксацией когда из много вариантов, как раз один вариант. Они также созданы используя бирку <input> HTML но тип атрибут установлен для радиопередачи.

Пример

Здесь Код HTML примера для формы с 2 кнопками с зависимой фиксацией:

<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>

Это даст следующий:

Maths Physics

Атрибуты

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

АтрибутОписание
типПоказывает что тип управления входного сигнала и для флажка input управление он будет установлен для радиопередачи.
имяИспользовано для того чтобы дать имя к управлению которое послано к серверу и для того чтобы получить значение.
значениеЗначение которое будет использовано если коробка радио выбрана.
провереноУстановите проверено если вы хотите выбрать его значением по умолчанию.

Выберите управление коробки

Отборная также вызванная коробка, падает вниз коробка которой обеспечивает вариант для того чтобы перечислить вниз с различных вариантов в форме упадите вниз список, от где потребитель может выбрать одни или больше варианты.

Пример

Здесь Код HTML примера для формы с одним падает вниз коробка

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>

Это даст следующий:

Атрибуты

Следование список важных атрибутов бирки <select>:

АтрибутОписание
имяИспользовано для того чтобы дать имя к управлению которое послано к серверу и для того чтобы получить значение.
размерЭто можно использовать для того чтобы представить окно списка скроллинга.
множественноЕсли комплект к «многократной цепи» после этого позволяет потребителю выбрать множественные детали от меню.

Следование список важных атрибутов бирки <option>:

АтрибутОписание
значениеЗначение которое будет использовано если выбран вариант в отборной коробке коробки.
выбраноОпределяет что этот вариант должен быть первоначально выбранным значением когда страница нагружает.
ярлыкАльтернативный путь обозначать варианты

Коробка upload архива

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

Example

Вот HTML-код в качестве примера для формы с одной коробкой закачки файла:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

This will produce following result:

Признаки

Ниже представлен список важных признаков коробки закачки файла:

Признак Описание
имя Используемый, чтобы дать имя к контролю, который посылают в сервер, который будет признан и получит стоимость.
принимает , Определяет типы файлов, которые принимает сервер.

Средства управления Кнопкой

Есть различные пути в HTML, чтобы создать clickable кнопки. Вы можете также создать clickable кнопку, используя < input> признак, устанавливая его признак типа в кнопку . Признак типа может взять следующие ценности:

Тип Описание
подчиняется , Это создает кнопку, которая автоматически представляет форму.
перезагрузил , Это создает кнопку, которая автоматически перезагружает средства управления формой к их начальным значениям.
Это создает кнопку, которая используется, чтобы вызвать подлинник стороны клиента, когда пользователь щелкает той кнопкой.
изображение Это создает clickable кнопку, но мы можем использовать изображение фона кнопки.

Пример

Вот HTML-код в качестве примера для формы с тремя типами кнопок: 

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
<input type="button" name="ok" value="OK"  />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>

Это приведет к следующему результату:

скрытые средства управления формой

Скрытые средства управления формой используются, чтобы скрыть данные в странице, которая позже может быть выдвинута к серверу. Этот контроль скрывается в кодексе и не появляется на фактической странице. Например, следующая скрытая форма используется, чтобы держать номер страницы в курсе. Когда пользователь щелкнет следующей страницей тогда, ценность скрытого контроля пошлют в веб-сервер, и там это решит, который страница имеет быть показанной затем основанная на переданной текущей странице.

Пример

Вот HTML-код в качестве примера, чтобы показать использование скрытого контроля: 

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
</form>
</body>
</html>

This will produce following result:

This is page 10

Advertisements