Вторник, 15 Мая 2012 09:26

Форма и элементы управления input, select, textarea

Written by 
Оцени эту запись
(6 Голоса)

В этой статье рассмотрим элементы управления, благодаря которым пользователь может обмениваться данными с сайтом - регистрация, авторизация, поиск, онлайн-калькулятор и многое другое. Любая форма на сайте запрашивает у пользователя ввести какие-то данные в определенные поля и отправляет их на сервер. 

 

 

 

Для ввода имени или фамилии используется <input type="text">, пожалуй, самый распространенный элемент форм. Туда же можно вводить и город, адрес и т.д.

Для пароля есть отдельный элемент <input type="password">. При вводе информации в него, вместо самих символов будут отображаться звездочки *.

Для выбора пола (мужской или женский) используется <input type="radio">. Такой вариант не допускает выбора более одного элемента из списка.

Если возможен выбор нескольких вариантов, например, увлечения - верховая езда, путешествия, игра на гитаре, нужно использовать <input type="checkbox">. 

Для ввода большого количества текста, вместо <input type="text">, используется <textarea>. Этот элемент допускает ввод текста в несколько строк. Если количество строк превышает область видимости textarea, у элемента появляется вертикальная прокрутка.

Еще один широко используемый элемент - это select. Он представляет из себя выпадающий список вариантов на выбор - города, категории, месяц или год рождения.  

Еще один тип инпута - submit. Это кнопка, при нажатии на которую данные отправятся на сервер. <input type="submit"> 

 

Все элементы управления должны располагаться в форме:

 

<form action="" method="">

</form>

 

action="url" - здесь прописывается путь к php-файлу, в котором должны обрабатываться данные, введенные в форму.

method="" - принимает значения get или post. Этот атрибут определяет способ отправки данных на сервер. При использовании метода get данные прописываются(добавляются) в адресную строку, при метода post - передаются на сервер (допускает передачу большего количества данных).

 

Внутри формы можно прописывать необходимые элементы:

 

 

<form action="" method="">

Имя<br>

<input type="text"><br>

Фамилия<br>

<input type="text"><br>

Месяц рождения<br> 

<select>

<option>Январь</option>

<option>Февраль</option>

<option>Март</option>

<option>Апрель</option>

<option>Май</option>

<option>Июнь</option>

<option>Июль</option>

<option>Август</option>

<option>Сентябрь</option>

<option>Октябрь</option>

<option>Ноябрь</option>

<option>Декабрь</option>

</select><br> 

Пол<br> 

<input type="radio">Женский<br>

<input type="radio">Мужской<br>

<input type="submit" value="Зарегистрироваться">

</form>

 

 

Имя

Фамилия

Месяц рождения

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

 

Можно сюда еще добавить ввод и повтор пароля <input type="password">, выбор увлечений <input type="checkbox"> и информацию о себе <textarea>:

 

 

<form action="" method="">

Имя<br>

<input type="text"><br>

Фамилия<br>

<input type="text"><br>

Месяц рождения<br> 

<select>

<option>Январь</option>

<option>Февраль</option>

<option>Март</option>

<option>Апрель</option>

<option>Май</option>

<option>Июнь</option>

<option>Июль</option>

<option>Август</option>

<option>Сентябрь</option>

<option>Октябрь</option>

<option>Ноябрь</option>

<option>Декабрь</option>

</select><br> 

Пол<br> 

<input type="radio">Женский<br>

<input type="radio">Мужской<br>

Ваше хобби<br>

<input type="checkbox">Кино<br>

<input type="checkbox">Музыка<br>

<input type="checkbox">Книги<br>

<input type="checkbox">Путешествия<br>

<input type="checkbox">Танцы<br>

<input type="checkbox">Фотография<br>

Немного о себе<br>

<textarea></textarea><br>

Введите пароль<br>

<input type="password"><br>

Подтвердите пароль<br>

<input type="password"><br>

<input type="submit" value="Зарегистрироваться">

</form>

 

 

Имя

Фамилия

Месяц рождения

Пол
Женский
Мужской
Ваше хобби
Кино
Музыка
Книги
Путешествия
Танцы
Фотография
Немного о себе

Введите пароль

Подтвердите пароль

 

 

 

По умолчанию внешний вид формы будет другой. У меня здесь добавлены такие стили:

 

input, textarea, select, button { background: #151515; color: #CCC; border: 1px solid #CCC; padding: 2px 5px;}

 

Это максимум, как можно стилизировать форму с помощью CSS. Элементы <input type="radio"> и <input type="checkbox"> можно стилизировать исключительно с использованием Javascript. Об этом можно подробно прочитать в статье Стилизация элементов управления select, checkbox, radio.

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

 

<form>

<table>

<tr>

<td>Имя</td><td><input type="text"></td>

</tr>

</table>

</form>

 

Имя

 

Или же можно это сделать блоками:

 

 

<form>

<div style="width:200px; text-align: right; float:left">

Имя<br>

Фамилия

</div>

<div style="width:200px; text-align:left; float: left">

<input type="text"><br>

<input type="text">

</div>

</form>

 

 

 

Имя
Фамилия

 

 

 

 

Посмотрим как будет смотреться наша форма, упорядоченная вторым способом:

 

 

Имя
Фамилия
Месяц рождения
Пол

Ваше хобби




Немного о себе
Введите пароль
Подтвердите пароль



Женский
Мужской
Кино
Музыка
Книги
Путешествия
Танцы
Фотография


 

 

 

Удачи в создании форм!

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов