Вверх страницы

Вниз страницы

Forix ФоРуМ рунета

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » Формы HTML | Теги input и textarea


Формы HTML | Теги input и textarea

Сообщений 1 страница 2 из 2

1

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

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

http://s3.uploads.ru/t/5ln3V.png

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

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

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

Написание:

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

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

Кроме обязательного атрибута 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>

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

0

2

http://s7.uploads.ru/t/sHh9B.png

<!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. Если применить оформление css, то как всю картинку, так и отдельные элементы можно сделать гораздо симпатичнее.

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

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

0


Вы здесь » Forix ФоРуМ рунета » (x)HTML ★ WML ★ CSS » Формы HTML | Теги input и textarea


создать форум