HTML, формы и CSS (часть1 - HTML)


HTML формы и CSS  (часть 1- HTML)

Доброго всем дня! Этим уроком я начинаю претворять в жизнь задуманный цикл о формах. Я обещал начать его с рассмотрения синтаксиса HTML и возможности оформления форм с помощью каскадных таблиц стилей CSS, однако при ближайшем рассмотрении оказалось , что тема эта настолько обширна и глубока, что скорее всего в один присест рассмотреть синтаксис HTML и стили CSS применяемые к формам на веб-страницах вряд ли получится.


Начнем с HTML


А так как изучать что то лучше всего на действующем примере, то я приготовил для образца форму, в которой, пожалуй, задействованы все возможные элементы, применяемые в ней. Если есть желание можете протестировать форму понажимав по кнопочкам — все работает!


Изучаем форму
input type="text"
Введите имя:
input type="password"
Введите пароль:
input type="radio"
Ваш пол
М
Ж
input type="checkbox"
Какие категории сайта вам наиболее интересны
HTML и CSS
PHP и MYSQL
JavaScript + jQuery
select
На какие страницы сайта вы заходите чаше всего
    
textarea
Ваш комментарий:
type="button", type="file", type="submit", type="reset" и type="hidden"
         

Итак, приступим!

Прежде всего необходимо упомянуть два тега - <form> и </form>, определяющих начало и конец формы, между которыми и находится ее содержимое. Открывающий форму тег <form> может содержать следующие атрибуты:

  • - name – определяет имя формы, уникальное для данного документа. Используется только если в документе присутствует несколько форм;
  • - action – обязательный атрибут. Указывает путь к программе обработчику;
  • - method – определяет способ отправки содержимого HTML формы;

Возможные значения method: GET - используется по умолчанию, и POST.  Подробгнее эти методы будут рассмотрены в уроке: "Форма, PHP и Mysql". Пока же запомните,что отличие между методами POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку браузера, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

Обратимся теперь к содержимому формы


Начинается она с полей для ввода имени и пароля, которые формируются с помощью тега <input>

Вообще тэг <input>  очень часто используется в формах. С его помощью создаются однострочные поля ввода текста, и поля для ввода пароля, кнопки, чекбоксы и радиокнопки.
А имеет тег <input> следующие артибуты:

type
определяет тип поля ввода. По умолчанию - это простое поле ввода для одной строки текста - text. При использовании остальных типов они должны быть явно определены.
name
имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, можно получить данные, введенные пользователем .
value
значение по умолчанию или значение которое будет выбрано при использовании типа radio (для типа radio данный атрибут обязателен).
size
размер поля для ввода на экране в символах.
maxlength
определяет количество символов, которое пользователи могут ввести в поле ввода. Если maxlength больше чем size, то в поле осуществляется скроллинг. По умолчанию значение maxlength равно бесконечности.
checked
означает, что checkbox или radiobutton будет выбран. 
src
URL, указывающий на картинку (используется совместно с атрибутом image).

Однострочные поля ввода


input type="text"
Введите имя:
input type="password"
Введите пароль:


<div> Введите имя:<br> <input type="text" name="name" value="Введите имя" size="" maxlength="" /> </div> <div> Введите пароль:<br> <input type="password" name="pass" value="pass" size="" maxlength="4" />

Переключатели и флажки


Дальше форму продолжает следующий блок с полями, которые так же формируются с помощью тега input. Это поле для переключателей типа radio, и поле для множественного выбора checkbox.

radio
Данный атрибут позволяет выбрать одно значение из нескольких вариантов. Для их создания вам необходимо определить несколько полей ввода с атрибутом type="radio" с разными значениями атрибута value, но с одинаковыми значениями атрибута name. В программу обработчик будет передано значение типа name=value, причем value примет значение того поля ввода, которое в данный момент будет выбрано.
checkbox
Используется для простых логических значений. Значение, ассоциированное с именем этого поля и пердаваемое из формы, может принимать значение on или off.

input type="radio"
Ваш пол
М
Ж
input type="checkbox"
Какие категории вам наиболее интересны
HTML и CSS
PHP и MYSQL
JavaScript + jQuery
<div>Ваш пол</div> <div> <input name="sex" type="radio" value="male" checked="true" /> М<br /> <input name="sex" type="radio" value="female" /> Ж </div> <div> Какие категории вам наиболее интересны </div> <div> <input type="checkbox" name="HTML и CSS" value ="Да" checked="true" /> HTML и CSS <br> <input type="checkbox" name="PHP и MYSQL" value ="Да" /> PHP и MYSQL <br> <input type="checkbox" name="JavaScript + jQuery" value ="Да" /> JavaScript + jQuery </div>

Поля выбора


Следующим в нашей форме идет элемент список select, который может быть представлен в виде выпадающего или раскрытого списка, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов <select></select>, внутрь которых вложены теги <option></option>, которые  позволяют определить содержимое списка, а параметр value определяет значение строки, причем варианты могут быть выбраны заранее.

Значения атрибутов элемента select:
name
Определяет имя управляющего элемента.
size
определяет число строк в списке, видимых в один момент времени. Если size=1, то список будет выпадающим.
multiple
позволяет выбрать несколько пунктов меню. Если он не установлен, в элементе select можно выбрать только один вариант.
selected
означает что данное значение, будет выбрано по умолчанию.

select
На какие страницы сайта вы заходите чаше всего
    

<div>На какие страницы сайта вы заходите чаше всего</div> <div> <select name="pages" size="1" > <option selected="selected">Главная</option> <option >Обучение</option> <option >Наши проекты</option> </select>&nbsp;&nbsp;&nbsp;&nbsp; <select name="pages" size="3" multiple="true"> <option selected="selected">Глвная</option> <option >Обучение</option> <option selected="selected">Наши проекты</option> </select> </div>


Многострочное поле ввода текста


Продолжаем рассматривать форму и следующим идет многострочное поле ввода текста textarea. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <textarea></textarea>.

В свою очередь пользователь может определить следующие атрибуты:
name
Имя  элемента.
rows
Число видимых текстовых строк. Если содержимое выходит за пределы видимой области, то у данного поля появляются полосы прокрутки.
cols
Ширина поля. При выходе за границы поля, так же появляются полосы прокрутки.
readonly
запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения.

textarea
Ваш комментарий:

<div>Ваш комментарий:<br> <textarea name="adress" cols="45" rows="5"></textarea> </div>

Кнопки


Ну и в самом низу формы примостились кнопки - элементы которые определяются также с помощью тега input и имеют следующие параметры:

browse
Если в форме используется кнопка для загрузки файлов, то Начинающий тэг form должен содержать необходимый атрибут encrypt, который принимает значение multipart/form-data. При создании текстового поля также необходимо указать тип файла – file.
reset
При нажатии на кнопку сброса reset, все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.
submit
Кнопка отправки формы При создании кнопки для отправки формы необходимо указать 2 атрибута: type=“submit” и value=”Текст кнопки”.
hidden
Скрытое текстовое поле, которое не отображается браузером и не дает пользователю изменять значения присвоенное данному полю. Позволяет передавать в обработчик информацию, не отображая её на странице.

type="button", type="file", type="submit", type="reset" и type="hidden"
              

<div> <input name="my_file" type="file" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value=" Отмена" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" value="Отправить" /> &nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="Отмена" /> <input type="hidden" name="hidden" /> </div>

Ну а собственно сам код формы получился такой:
Свернуть код:
<div style="margin:0 auto; width:600;"> <form name="form_HTML" method="post" action="" > <fieldset> <legend>Изучаем форму</legend> <fieldset> <legend>input type="text"</legend> <div> Введите имя:<br> <input type="text" name="name" value="Введите имя" size="" maxlength="" /> </div> </fieldset> <fieldset> <legend>input type="password"</legend> <div> Введите пароль:<br> <input type="password" name="pass" value="Введите пароль" /> </div> </fieldset> <fieldset> <legend>input type="radio"</legend> <div>Ваш пол</div> <div> <input name="sex" type="radio" value="male" checked="true" /> М<br> <input name="sex" type="radio" value="female" /> Ж </div> </fieldset> <fieldset> <legend>input type="checkbox"</legend> <div> Какие категории сайта вам наиболее интересны </div> <div> <input type="checkbox" name="HTML и CSS" value ="Да" checked="true" /> HTML и CSS <br> <input type="checkbox" name="PHP и MYSQL" value ="Да" /> PHP и MYSQL <br> <input type="checkbox" name="JavaScript + jQuery" value ="Да"> JavaScript + jQuery </div> </fieldset> <fieldset> <legend>select</legend> <div>На какие страницы сайта вы заходите чаше всего</div> <div> <select name="pages" size="1" > <option selected="selected">Главная</option> <option >Обучение</option> <option >Наши проекты</option> </select>&nbsp;&nbsp;&nbsp;&nbsp; <select name="pages" size="3" multiple="true"> <option >Глвная</option> <option selected="selected">Обучение</option> <option >Наши проекты</option> </select> </div> </fieldset> <fieldset> <legend>textarea</legend> <div>Ваш комментарий:<br> <textarea name="adress" cols="45" rows="5"></textarea> </div> </fieldset> <fieldset> <legend> type="button", type="file", type="submit", type="reset" и type="hidden" </legend> <div> <input name="my_file" type="file" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value=" Отмена " />&nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" value="Отправить" /> <input type="hidden" name="hidden" /> </div> </fieldset> </fieldset> </form> </div>

Остались не рассмотренными только теги fieldset и legend, но их я рассмотрю во второй части урока - "HTML, формы и CSS (часть2 - CSS)", так как они применяются для оформления формы. Нам сегодня это все! Появились вопросы? Задавайте в комментариях.

Автор: Сергей Зарубин

Дата: 2011-07-23

Колличество просмотров: 6937

Нравится

Комментарии к заметке:

Комментарий добавил(а): Global-it-Solutions
Дата: 2017-06-24

Все понятно. Спасибо!http://global-it-solutions.eu/



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


Введите число с картинки:

captcha