Формы html. Тег input

Здравствуйте уважаемые начинающие веб-мастера. Продолжим изучение HTML

Эту статью полностью посвятим формам html.

Во первых, что такое форма html. Все Вы конечно же встречали элементы, или поля, в которые нужно вводить логин и пароль. Так вот — это форма.

Различные окошки, в которые выставляются галочки или точки для выбора того или иного элемента или действия — это тоже форма.

Поля для комментариев, кнопки Отправить, Очистить, Выберите файл — всё это тоже формы html.

Создаются формы при помощи тегов <form> и <input>, причём тег <form> создаёт саму форму и имеет открывающую и закрывающую части, а тег <input> определяет вид и содержание, и закрывающей части не имеет.

Написание:

<form>
<input … …>
</form>

Тег <input> имеет обязательный атрибут, или параметр type, значение которого определяет, какой вид будет иметь форма.

<input type="password"> Поле для ввода пароля
<input type="text"> Поле для ввода текста
<input type="button"> Кнопка
<input type="reset"> Сбросить
<input type="submit"> Отправить
<input type="image" src="URL"> Кнопка картинка
<input type="checkbox"> Позволяет выбрать несколько элементов Арбуз
Дыня
<input type="radio"> Переключатель выбирает один элемент Арбуз
Дыня
<input type="file"> Выбор файла

Кроме обязательного атрибута type, тег input принимает ещё ряд атрибутов, значения которых влияют на формы.

size — определяет ширину текстового поля.

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

Синтаксис: <input type="text" size="20">

value — присваивает значение элемента.

В зависимости от типа формы, значения атрибута value выполняют следующие функции:

1. Для текстовых полей, указывает предварительно введённую строку. Например в форме подписки — это Ведите Ваш E-mail. При заполнения поля, эта строка исчезает, а после очистки появляется вновь.

<input type="text" value="Введите Ваш e-mail">

2. Для кнопок устанавливает текст внутри кнопки.

<input type="button" value="Кнопка">

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

<input type="radio" value="one"> Арбуз
<input type="radio" value="two"> Дыня

align — определяет выравнивание изображения, текста.

Принимает значения:

bottom — выравнивание по нижней границе (задаётся по умолчанию);

top — выравнивание изображения по самому высокому элементу первой строки;

left — выравнивание по левому краю;

right — выравнивание по правому краю;

middle — выравнивание середины изображения по базовой линии;

<input type="image" src="images/10.png" align="left">

alt — альтернативный текст изображения.

Выводит окно с описанием изображения при наведении курсора.

<input type="image" alt="Любой текст">

border — добавляет рамку к изображению.

Задаётся только толщина рамки любым целым числом в пикселях. Цвет — под цвет текста.

<input type="image" border="2">

name — имя формы, необходимое для идентификации её обработчиком.

В значении указывается любое уникальное имя.

<input type="Любой из элементов" name="Любое имя">

checked — предварительно активированный переключатель или флажок.

У этого атрибута нет значений. Просто его присутствие указывает, что переключатель или флажок уже помечен.

disabled — блокирует возможность изменения элемента.

У этого атрибута нет значений. Его присутствие блокирует всякую активность в форме.

maxlenght — определяет максимальное количество символов в тексте.

В значении указывается любое целое положительное число

<input type="text" maxlenght="200">

readonly — устанавливает, что поле и его содержание не могут изменятся пользователем.

У этого атрибута нет значений.

Форма комментариев создаётся несколько иначе.

Для создания формы комментариев применяется тег textarea

Размер окно задаётся атрибутами cols и rows, через количество предполагаемых строк и столбцов.

Их значения задаются любыми целыми положительными числами.

Синтаксис:

Комментарий<br>
<textarea name="comment" cols="40" rows="3"></textarea>

Комментарий

Теперь напишем html файл с формами, и посмотрим, как всё это смотрится в коде.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Формы</title>
<body>
<form>
<p>Войти
<input type="password" value="Пароль">
<input type="text" value="Логин"></p>

<p>Ваш пол<br>
<input type="radio" name="pol" value="muj"> Муж.<br>
<input type="radio" name="pol" value="jen"> Жен.</p>

<p>Ваша профессия<br>
<input type="checkbox" name="builder" value="buil"> Строитель<br>
<input type="checkbox" name="military" value="mil"> Военный<br>
<input type="checkbox" name="farmer" value="farm"> Фермер</p>

<p>Напишите несколько слов о себе<br>
<textarea name="comment" cols="40" rows="3"></textarea></p>

<p><input type="submit">
<input type="reset"></p>
</form>
</body>
</html>

Результат:

Формы html

Вот такая форма обратной связи с пользователем получилась.

Как Вы надеюсь понимаете — это чистый html. Если применить оформление css, то как всю картинку, так и отдельные элементы можно сделать гораздо симпатичнее.

Но об этом читайте в рубрике CSS

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

Приглянулось платье. Решила купить — не влезла. Расстроилась, купила торт. Влез гад.

Мета-теги < < < ◊ > > > Вставляем видео и делаем ему рамочку

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

3 комментария на «Формы html. Тег input»

  1. stariс говорит:

    Хорошие примеры. Только в них совсем не простой javascript с библиотекой. И это не jQeri. Да и css фреймворковый.

  2. Алекс говорит:

    Примеры оформления форм http://tympanus.net/Development/TextInputEffects/index.html

  3. Сури говорит:

    Не знаю как для какого, а для меня Ваши статьи-находка! Буду благодарна за новые статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *