Формы в CSS

Формы в CSS

Тематические порталы Портал CSS • Портал Веб-разработчиков

В HTML есть различные виды форм, предназначенные для сбора, отправления информации от пользователей. Чтобы сделать эти формы удобнее для пользователей, оформить их в общем дизайне сайта, можно сделать это при помощи CSS.

Подготовка форм в HTML

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

• флажок - предназначен для выбора нескольких вариантов из опций:

<input type="checkbox" name="checkbox_button" value="Option 1">Подпись 1

• радиокнопка - предназначен для выбора одного варианта из опций:

<input type="radio" name="radio_button" value="Option 1">Подпись 1

• меню <select> с элементами <optgroup> и <option> внутри - предназначен для выбора одного варианта из списка. Зачастую используется при длинном списке выбора:

<select name="select"><option>Выберите значение</option></select>

• строка текста: тип text, а также элемент <textarea></textarea> (многострочное текстовое поле);

Выведем все формы через HTML:

<input type="checkbox" name="checkbox_button" value="Option 1">Подпись 1<br>
<input type="checkbox" name="checkbox_button" value="Option 1">Подпись 2<br>
<input type="checkbox" name="checkbox_button" value="Option 1">Подпись 3<br>
<br>
<input type="radio" name="radio_button" value="Option 1">Подпись 1<br>
<input type="radio" name="radio_button" value="Option 1">Подпись 2<br>
<input type="radio" name="radio_button" value="Option 1">Подпись 3<br>
<br>
<select name="select"><option>Выберите значение</option></select><br>
<br>
<textarea name="text_area" class="textarea"></textarea>

CSS настройки форм

К каждому типу форм можно задать общие настройки, указав тип формы, либо каждой форме задать уникальные CSS настройки, задав имя данной форме через id или class.

Примечание

Данный раздел находится в стадии доработки.{{{дата}}} Автор статьи работает над завершением этой статьи. Свои пожелания, комментарии и вопросы оставляйте на странице обсуждения. {{{описание3}}}