Элементы формы

 

Ввод текста Все элементы формы помещаются в тег form. Для него всегда должен быть указан атрибут action, кроме того, для этого элемента часто устанавливают атрибуты method и id.Кроме того, для этого элемента часто устанавливают атрибуты.


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

 

<html>
<head>
<title>Текстовая область</title>
</head>
<body>
<form action="//www.primer.ru/profile.php">
<p>Что вы думаете об этом выступлении?</p>
<textarea name="comments" cols="20" rows="4">Введите свой комментарий...</textarea>
</form>
</body>
</html>

 

Что вы думаете об этом выступлении?

 


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

 

<html>
<head>
<title>Раскрывающийся список</title>
</head>
<body>
<form action="//www.example.com/profile.php">
<p>На каком устройстве вы слушаете музыку чаще всего?</p>
<select name="ustroistva">
<option value="ipod">iPod</option>
<option value="radio">Радио</option>
<option value="computer">Компьютер</option>
</select>
</form>
</body>
</html>
На каком устройстве вы слушаете музыку чаще всего?

 


Загрузка файлов на сервер

 

<html>
<head>
<title>Выгрузка файлов на сервер</title>
</head>
<body>
<form action="//www.primer.ru/zagruzka.php" method="post">
<p>Выгрузите свою песню в формате MP3:</p>
<input type="file" name="pesnya" /><br />
<input type="submit" value="Выгрузить" />
</form>
</body>
</html>

 

Выгрузите свою песню в формате MP3:

 


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

 

<html>
<head>
<title>Кнопка подтверждения</title>
</head>
<body>
<form action="//www.primer.ru/podpiska.php">
<p>Подпишитесь на рассылку наших новостей:</p>
<input type="text" name="email" />
<input type="submit" name="podpisatsya" value="Подписаться" />
</form>
</body>
</html>

 

Подпишитесь на рассылку наших новостей:  

 


Группировка элементов формы

 

<html>
<head>
<title>Группировка элементов формы</title>
</head>
<body>
<form action="//www.example.com/subscribe.php">
<fieldset>
<legend>Контактная информация</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Телефон:<br />
<input type="text" name="phone" /></label><br />
<label>Факс:<br />
<input type="text" name="fax" /></label>
</fieldset>
</form>
</body>
</html>

 


Контактная информация



 


HTML5: валидация данных формы

 

<html>
<head>
<title>HTML5: валидация данных формы</title>
</head>
<body>
<form action="//www.example.com/login/" method="post">
<label for="username">Имя пользователя:</label>
<input type="text" name="username" required="required" /></title><br />
<label for="password">Пароль:</label>
<input type="password" name="password" required="required" />
<input type="submit" value="Отправить" />
</form>
</body>
</html>

 

 
 
 

 


HTML5: Ввод даты

 

<html>
<head>
<title>HTML5: ввод даты</title>
</head>
<body>
<form action="//www.primer.ru/bookings/" method="post"
<label for="depart">Дата вылета</label>
<input type="date" name="depart" />
<input type="submit" value="Отправить" />
</form>
</body>
</html>

 

Дата вылета 
 

 


HTML5: Ввод даты

 

<html>
<head>
<title>HTML5: ввод адреса электронной почты</title>
</head>
<body>
<form action="//www.primer.ru/profile.php" method="post"
<p>Пожалуйста введите адрес электронной почты:</p>
<input type="email" name="email" />
<input type="submit" value="Отправить" />
</form>
</body>
</html>

 

Пожалуйста введите адрес электронной почты:
 

 


HTML5: ввод URL-адреса

 

<html>
<head>
<title>HTML5: ввод URL-адреса</title>
</head>
<body>
<form action="//www.primer.ru/profile.php" method="post"
<p>Пожалуйста введите адрес вашего сайта:</p>
<input type="url" name="sait" />
<input type="submit" value="Отправить" />
</form>
</body>
</html>

 

Пожалуйста введите адрес вашего сайта:
 

 


HTML5: ввод URL-адреса

 

<html>
<head>
<title>HTML5: заполнитель</title>
</head>
<body>
<form action="//www.example.org/search.php">
Поиск:</p>
<input type="search" name="poisk" placeholder="Купить компьютер"/>
<input type="submit" value="Искать" />
</form>
</body>
</html>

 

Поиск:
 
Понравилась статья? Поделиться с друзьями:
Блог Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: