71 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			71 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| ---
 | ||
| title: HTML Forms
 | ||
| localeTitle: HTML-формы
 | ||
| ---
 | ||
| ## HTML-формы
 | ||
| 
 | ||
| В основном, формы используются для сбора данных, введенных пользователем, которые затем отправляются на сервер для дальнейшей обработки. Они могут использоваться для различных видов пользовательских входов, таких как имя, адрес электронной почты и т. Д.
 | ||
| 
 | ||
| Форма содержит элементы управления, которые обернуты тегами `<form></form>` , например `input` , которые могут иметь такие типы, как:
 | ||
| 
 | ||
| *   `text`
 | ||
| *   `email`
 | ||
| *   `password`
 | ||
| *   `checkbox`
 | ||
| *   `radio`
 | ||
| *   `submit`
 | ||
| *   `range`
 | ||
| *   `search`
 | ||
| *   `date`
 | ||
| *   `time`
 | ||
| *   `week`
 | ||
| *   `color`
 | ||
| *   `datalist`
 | ||
| 
 | ||
| Пример кода:
 | ||
| 
 | ||
| ```html
 | ||
| 
 | ||
| <form> 
 | ||
|     <label for="username">Username:</label> 
 | ||
|     <input type="text" name="username" id="username"> 
 | ||
|     <label for="password">Password:</label> 
 | ||
|     <input type="password" name="password" id="password"> 
 | ||
|     <input type="radio" name="gender" value="male">Male<br> 
 | ||
|     <input type="radio" name="gender" value="female">Female<br> 
 | ||
|     <input type="radio" name="gender" value="other">Other 
 | ||
|     <input list="Options"> 
 | ||
|     <datalist id="Options"> 
 | ||
|       <option value="Option1"> 
 | ||
|       <option value="Option2"> 
 | ||
|       <option value="Option3"> 
 | ||
|     </datalist> 
 | ||
|     <input type="submit" value="Submit"> 
 | ||
|     <input type="color"> 
 | ||
|     <input type="checkbox" name="correct" value="correct">Correct 
 | ||
|  </form> 
 | ||
| ```
 | ||
| 
 | ||
| Другие элементы, которые могут содержать:
 | ||
| 
 | ||
| *   `textarea` - это многострочный блок, который чаще всего используется для добавления некоторого текста, например. комментарий. Размер textarea определяется количеством строк и столбцов.
 | ||
| *   `select` - вместе с `<option></option>` создает раскрывающееся меню выбора.
 | ||
| *   `button` - Элемент кнопки можно использовать для определения кнопки с нажатием кнопки.
 | ||
| 
 | ||
| Дополнительная информация о HTML-форматах.
 | ||
| 
 | ||
| Формы HTML необходимы, когда вы хотите собрать некоторые данные от посетителя сайта. Например, во время регистрации пользователя вы хотели бы получить информацию, такую как имя, адрес электронной почты, кредитную карту и т. Д.
 | ||
| 
 | ||
| Форма примет вход от посетителя сайта, а затем отправит его в фоновое приложение, такое как CGI, сценарий ASP или PHP-скрипт и т. Д. Внутреннее приложение выполнит требуемую обработку переданных данных на основе определенной бизнес-логики внутри приложение.
 | ||
| 
 | ||
| Существуют различные элементы формы, такие как текстовые поля, поля текстовой области, раскрывающиеся меню, переключатели, флажки и т. Д.
 | ||
| 
 | ||
| Тег HTML `<form>` используется для создания HTML-формы и имеет следующий синтаксис:
 | ||
| 
 | ||
| `html <form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>`
 | ||
| 
 | ||
| Если метод формы не определен, он будет по умолчанию «GET».
 | ||
| 
 | ||
| Тег формы также может иметь атрибут с именем «target», который указывает, где будет открыта ссылка. Он может открываться на вкладке браузера, в кадре или в текущем окне.
 | ||
| 
 | ||
| Атрибут action определяет действие, которое должно выполняться при отправке формы. Обычно данные формы отправляются на веб-страницу по URL-адресу скрипта, когда пользователь нажимает кнопку отправки. Если атрибут действия опущен, действие устанавливается на текущую страницу. |