CSS формы. Создание и работа с формами в html Дополнительные элементы и атрибуты

1) Если мы используем метод post: mysite.ru/request.php .
2) Если мы используем метод get: mysite.ru/request.php?myname="Alex"&surname="Gulynin" .
Думаю различия понятны.

Элементы формы:

1) Тестовое поле . Текстовое поле создаётся с помощью тега , как впрочем и все элементы формы. Атрибут type="text" как раз и отвечает за то, что будет создано текстовое поле. Атрибут name — это имя, как и во всех элементах формы. Атрибут value — это значение по умолчанию.

2) Поле для ввода пароля . Задаётся с помощью все то же тега с атрибутом type="password" .

3) Текстовая область . Задаётся с помощью тега . Это парный тег, текстовая область должна закрываться тегом . У этого элемента есть несколько атрибутов. Также можно задать атрибут name . Атрибут rows отвечает за количество строк, атрибут cols — за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения, до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).

4) Радиокнопки . Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки также создаются с помощью тега с атрибутом type="radio" . Атрибут value указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name . Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked (значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.

5) Флажки . В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега с атрибутом type="checkbox" . Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck="" .

6) Выпадающий список . Выпадающий список создаётся с помощью тега и заканчивается тегом . В данной конструкции необходимо ещё с помощью тега указать элементы списка.

7) Поле для отправки файла . Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега с атрибутом type="file" . Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.

8) Скрытое поле . Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег с атрибутом type="hidden" . На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.

9) Кнопки . Кнопки создаются с помощью тега с атрибутом type="button" . Атрибут value отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.

10) Отправка формы . По сути это такая же кнопка, но с атрибутом type="submit" . При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.

Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода . Эти виды взаимодействия включают в себя:

• регистрацию и вход на сайтах;
• ввод личной информации (имя, адрес, данные кредитной карты и др.);
• фильтрацию контента (с помощью выпадающих списков, флажков и др.);
• выполнение поиска;
• загрузку файлов.

Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:

• текстовые поля (для одной или нескольких строк);
• переключатели;
• флажки;
• выпадающие списки;
• виджеты для загрузки;
• кнопки отправки.

Эти элементы управления задействуют разные теги HTML, но большинство из них использует тег . Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type :

Элемент

является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как , или <button> ) должны находиться <i>внутри </i> элемента <form> .</p><p>Два атрибута HTML <b>необходимы </b>:</p><ul><li>action содержит адрес, который определяет, <i>куда </i> будет отправлена информация формы;</li><li>method может быть либо GET, либо POST и определяет, <i>как </i> будет отправлена информация формы.</li> </ul><p>Как правило, информация формы посылается на <b>сервер </b>. <i>Как </i> эти данные затем будут обработаны выходит за рамки данного руководства.</p><p>Подумайте о форме как о наборе элементов управления, которые работают вместе, чтобы выполнить <b>одну </b> операцию. Если вы написали форму входа на сайт, у вас могло быть <b>три </b> поля:</p><ul><li>поле для электронной почты <input type="email"> </li><li>поле для пароля <input type="password"> </li><li>кнопка отправки <input type="submit"> </li> </ul><p>Эти три элемента HTML будут заключены внутри одной формы <span><form action="/login" method="POST"> </span>.</p><p>Вы можете аналогично добавить форму регистрации на той же HTML-странице, в отдельном элементе <form> .</p><h2>Текстовые поля</h2><p>Почти всем формам требуется <b>текстовый </b> ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.</p><p>Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую <b>семантику </b> для ввода, определяя, какую информацию поле <b>должно </b> содержать.</p><p>Браузеры могут впоследствии немного изменить интерфейс элемента управления, чтобы повысить <i>интерактивность </i> или подсказать, какое содержимое ожидается.</p><p>К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.</p><h2>placeholder</h2><p>Текстовые поля могут отображать <b>подсказывающий </b> текст, который исчезнет, как только будет введён некоторый текст.</p><p> <input type="text" placeholder="Введите своё имя"> </p><p>Если вы начинаете набирать что-то, то увидите как текст «Введите своё имя» исчезнет.</p><h2><label></h2><p>Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая <b>метка </b>.</p><p> <label>Email</label> <input type="email"> </p><p>В то время как placeholder уже обеспечивает некоторую подсказку о том, какое ожидается содержание, метки имеют преимущество оставаясь видимыми в любое время и могут использоваться наряду с другими типами элементов формы, таких как флажки или переключатели.</p><p>Хотя вы можете применять короткие абзацы для описания элементов формы, использование <label> является семантически более правильным, потому что они существуют только в формах. <label> также может быть связан с определённым элементом формы с помощью атрибута for , соответствующему значению id у поля.</p><p> <label for="first_name">Имя</label> <input id="first_name" type="text"> </p><p>При щелчке по метке фокус переходит к текстовому полю и помещает курсор внутрь него. Пока эта связка кажется бесполезной, но пригодится с флажками и переключателями.</p><h2>Флажки</h2><p><b>Флажки </b> - это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.</p><p> <input type="checkbox"> Запомнить меня </p><p>Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь <label> .</p><p> <label> <input type="checkbox"> Я согласен с условиями </label> </p><p>Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.</p><p>По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked .</p><p> <label> <input type="checkbox" checked> Использовать мой платёжный адрес </label> </p><h2>Переключатели</h2><p>Вы можете предоставить пользователю <b>список вариантов </b> на выбор с помощью переключателей.</p><p>Для работы этого элемента формы, ваш HTML-код должен <b>сгруппировать </b> список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:</p><p> <label>Семейное положение</label> <label> <input type="radio" name="status"> Холост </label> <label> <input type="radio" name="status"> Женат </label> <label> <input type="radio" name="status"> Разведён </label> <label> <input type="radio" name="status"> Вдовец </label> </p><p>Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status ), выбор одного из вариантов отменит все остальные. Переключатели являются <b>взаимоисключающими </b>.</p><h3>Разница между переключателями и флажками</h3><p>Хотя флажок существует <b>сам по себе </b>, переключатели могут появляться только в виде <b>списка </b> (что означает, по меньшей мере два варианта).</p><p>Кроме того, щелчок по флажку является <b>произвольным </b>, в то время как выбор одного из переключателей является <b>обязательным </b>. Вот почему невозможно выключить переключатель, если выбрать ближайший вариант. В конце концов, всегда выбирается один из переключателей.</p><h2>Выпадающие меню</h2><p>Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню <select> .</p><p>Они работают подобно переключателям, отличается только компоновка.</p><p> <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> </p><h3>Множественный выбор из выпадающего меню</h3><p>Если добавить атрибут multiple , вы можете предоставить возможность выбрать несколько вариантов.</p><p> <label>Какими браузерами вы пользуетесь?</label> <select multiple> <option>Google Chrome</option> <option>Internet Explorer</option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Выберите несколько вариантов посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению несколько флажков в строке.</p><h2>Пример: полная форма регистрации</h2> <form action="/signup" method="POST"> <p> <label>Обращение</label> <label> <input type="radio" name="title" value="mr"> Г-н </label> <label> <input type="radio" name="title" value="mrs"> Г-жа </label> </p> <p> <label>Имя</label> <input type="text" name="first_name"> </p> <p> <label>Фамилия</label> <input type="text" name="last_name"> </p> <p> <label>Email</label> <input type="email" name="email"> </p> <p> <label>Телефон</label> <input type="tel" name="phone"> </p> <p> <label>Пароль</label> <input type="password" name="password"> </p> <p> <label>Подтвердите пароль</label> <input type="password" name="password_confirm"> </p> <p> <label>Страна</label> <select name="country"> <option>Канада</option> <option>Франция</option> <option>Германия</option> <option>Италия</option> <option>Япония</option> <option>Россия</option> <option>Великобритания</option> <option>США</option> </select> </p> <p> <label> <input type="checkbox" name="terms"> Я согласен с условиями использования </label> </p> <p> <button> Зарегистрироваться </button> </p> </form> <p>Также доступны и другие элементы форм, но мы рассмотрели наиболее используемые.</p> <p><form action="file.php" method="post" id="form"> ... содержимое формы... </form></p> <li>Как раз внутри элемента form должны располагаться элементы управления, которых может быть сколь угодно много.</li> <p><b>Атрибуты формы: </b></p> <ul><li>В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке <i>php </i>или <i>perl </i>.</li> <li>Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .</li> <li>Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .</li> </ul><h2><span>Элементы формы html </span></h2> <ul><table><tr><td class="code"> <<span>input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" > </span> </td> </tr></table><p><input type="text" name="login" size="20" value="Логин" maxlength="25"></p> <p>Результат:</p> <p><input style="all: inherit; border:1px #aaa solid" type="text" size="20" value="Логин" maxlength="25"></p> <ul><li>Значение атрибута type — text — указывает на то, что это именно текстовое поле</li> <li>size — размер текстового поля в символах</li> <li>maxlength — максимальное кол-во вмещающихся в поле символов</li> <li>value — первоначальный текст в текстовом поле</li> <li>name — имя элемента, необходимо для обработки данных в файле-обработчике</li> </ul><p><input type="password" name="pass" size="20" value="Пароль" maxlength="25"></p> <p>Результат:</p> <p><input style="all: inherit; border:1px #aaa solid" type="password" size="20" value="Пароль" maxlength="25"><br> Вместо текста в поле отображается маска — звездочки или кружочки</p> <table><tr><td class="code"> <<span>input type = "submit" value = <span>"Отправить данные" </span>> </span> </td> </tr></table><p><input type="submit" value="Отправить данные"></p> <p>Результат:</p> <p><input type="submit" value=" Отправить данные " style="all: unset; border:1px #aaa solid"></p> <p>Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.</p> <table><tr><td class="code"> <<span>input type = "reset" value = "Очистить форму" > </span> </td> </tr></table><p><input type="reset" value="Очистить форму"></p> <p>Результат:<br><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-65.png' height="54" width="224" loading=lazy><br> Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)</p> <table><tr><td class="code"> <<span>input type = "checkbox" name = "asp" value = "yes" > </span>ASP<<span>br > </span> <<span>input type = "checkbox" name = "js" value = "yes" checked = "checked" > </span>javascript<<span>br > </span> <<span>input type = "checkbox" name = "php" value = "yes" > </span>PHP<<span>br > </span> <<span>input type = "checkbox" name = "html" value = "yes" checked = "checked" > </span>HTML<<span>br > </span> </td> </tr></table><p><input type="checkbox" name="asp" value="yes">ASP<br> <input type="checkbox" name="js" value="yes" checked="checked">javascript<br> <input type="checkbox" name="php" value="yes">PHP<br> <input type="checkbox" name="html" value="yes" checked="checked">HTML<br></p> <p><img src='https://i1.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-95.png' align="center" width="100%" loading=lazy><br> Результат:</p> <p><input type="checkbox">ASP<br><input type="checkbox" checked>javascript<br><input type="checkbox">PHP<br><input type="checkbox" checked>HTML</p> <p>В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа</p> <table><tr><td class="code"> <<span>input type = "radio" name = "book" value = "asp" > </span>ASP<<span>br > </span> <<span>input type = "radio" name = "book" value = "js" > </span>Javascript<<span>br > </span> <<span>input type = "radio" name = "book" value = "php" > </span>PHP<<span>br > </span> <<span>input type = "radio" name = "book" value = "html" checked = "checked" > </span>HTML<<span>br > </span> </td> </tr></table><p><input type="radio" name="book" value="asp">ASP<br> <input type="radio" name="book" value="js">Javascript<br> <input type="radio" name="book" value="php">PHP<br> <input type="radio" name="book" value="html" checked="checked">HTML<br></p> <p><img src='https://i1.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-89.png' align="center" width="100%" loading=lazy></p> <p>Результат:</p> <p><input type="radio">ASP<br><input type="radio">Javascript<br><input type="radio">PHP<br><input type="radio" checked>HTML</p> <p>radio кнопка html служит для единственного выбора из нескольких вариантов</p> <p>Атрибут checked устанавливает сразу элемент отмеченным</p> </ul><p><b>Важно: </b> Для элементов <b>radio </b> необходимо, чтобы значение атрибута <b>name </b> у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться</p> <h2><span>Выпадающий список HTML </span></h2> <p>Рассмотрим пример добавления выпадающего списка:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 </td><td class="code"> <<span>select name = "book" size = "1" > </span> <<span>option value = "asp" > </span>ASP<<span>/ option > </span> <<span>option value = "js" > </span>JavaScript<<span>/ option > </span> <<span>option value = "php" > </span>PHP<<span>/ option > </span> <<span>option value = "html" selected = "selected" > </span>HTML<<span>/ option > </span> <<span>/ select > </span> </td> </tr></table><p><select name="book" size="1"> <option value="asp">ASP</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </select></p> <p>Результат:</p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-68.png' height="122" width="117" loading=lazy></p> <ul><li>Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта</li> <li>Атрибут size со значением <i>«1» </i> указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню</li> <li>Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»</li> </ul><p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-90.png' align="center" width="100%" loading=lazy></p> <p>Для больших и сложных списков есть возможность <b>добавить подзаголовки </b> — тег optgroup с атрибутом label (надпись):</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <<span>select name = "book" size = "1" > </span> <<span>optgroup label = "Английские" > </span> <<span>option value = "asp" > </span>ASP<<span>/ option > </span> <<span>option value = "js" > </span>JavaScript<<span>/ option > </span> <<span>option value = "php" > </span>PHP<<span>/ option > </span> <<span>option value = "html" selected = "selected" > </span>HTML<<span>/ option > </span> <<span>/ optgroup > </span> <<span>optgroup label = "Русские" > </span> <<span>option value = "asp_rus" > </span>ASP по-русски<<span>/ option > </span> <<span>option value = "js_rus" > </span>JavaScript по-русски<<span>/ option > </span> <<span>/ optgroup > </span> <<span>/ select > </span> </td> </tr></table><p><select name="book" size="1"> <optgroup label="Английские"> <option value="asp">ASP</option> <option value="js">JavaScript</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </optgroup> <optgroup label="Русские"> <option value="asp_rus">ASP по-русски</option> <option value="js_rus">JavaScript по-русски</option> </optgroup> </select></p> <p><img src='https://i2.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-69.png' height="202" width="211" loading=lazy><br> Для предоставления возможности <b>выбора нескольких пунктов одновременно </b> необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1:</p> <p><textarea name="description" cols="30" rows="10">Текст

Результат:

• Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
• Атрибут rows определяет количество строк в элементе

Другие элементы

Дополнительные элементы и атрибуты

• Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

<input type = "checkbox" id = "book1" > <label for = "book1" > ASP</ label >

ASP

В примере создана надпись (тег label) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

Результат:



• Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

<input type = "text" name = "login" size = "20" value = "Логин" maxlength = "25" disabled = "disabled" > <input type = "checkbox" name = "asp" value = "yes" > ASP<br > <input type = "checkbox" name = "js" value = "yes" checked = "checked" disabled = "disabled" > javascript<br >


ASP
javascript