Главная » Языки программирования

Html код форма для ввода

Содержание
  1. Example
  2. A simple form
  3. HTML Content
  4. CSS Content
  5. Result
  6. Found a content problem with this page?
  7. Html код форма для ввода
  8. Форма обратной связи в HTML
  9. Тег — создание формы
  10. Форма для ввода текста
  11. Ввод текста в input
  12. Группировка элементов управления в HTML-форме
  13. Кнопки в HTML-форме
  14. Кнопка отправки формы
  15. Кнопка очистки формы
  16. Проверка заполнения формы
  17. Другие популярные элементы
  18. Форма загрузки файлов
  19. Выбор даты
  20. Выпадающий список
  21. Переключатели
  22. Зависимый переключатель
  23. Независимый переключатель
  24. HTML Forms
  25. Example
  26. The Element
  27. The Element
  28. Text Fields
  29. Example
  30. The Element
  31. Radio Buttons
  32. Example
  33. Checkboxes
  34. Example
  35. The Submit Button
  36. Example
  37. Example

Example

This is the example code for the article Your first HTML form.

A simple form

HTML Content

form action="/my-handling-form-page" method="post"> div> label for="name">Name:label> input type="text" id="name" name="user_name"> div> div> label for="mail">E-mail:label> input type="email" id="mail" name="user_email"> div> div> label for="msg">Message:label> textarea id="msg" name="user_message">textarea> div> div class="button"> button type="submit">Send your messagebutton> div> form>

CSS Content

form  /* Just to center the form on the page */ margin: 0 auto; width: 400px; /* To see the limits of the form */ padding: 1em; border: 1px solid #CCC; border-radius: 1em; > div + div  margin-top: 1em; > label  /* To make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; > input, textarea  /* To make sure that all text field have the same font settings By default, textarea are set with a monospace font */ font: 1em sans-serif; /* To give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* To harmonize the look & feel of text field border */ border: 1px solid #999; > input:focus, textarea:focus  /* To give a little highligh on active elements */ border-color: #000; > textarea  /* To properly align multiline text field with their label */ vertical-align: top; /* To give enough room to type some text */ height: 5em; /* To allow users to resize any textarea vertically It works only on Chrome, Firefox and Safari */ resize: vertical; > .button  /* To position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ > button  /* This extra margin represent the same space as the space between the labels and their text fields */ margin-left: .5em; >

Result

Found a content problem with this page?

Источник

Html код форма для ввода

Формы HTML

HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.

Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.

Форма обратной связи в HTML

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

Тег — создание формы

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

У тега есть два обязательных атрибута:

  • action — ссылка на скрипт, обычно PHP, который будет обрабатывать форму. А точнее, который будет обрабатывать введенные форму данные.
  • method — метод отправки данных на сервер (GET или POST).

Подробности вы сможете найти на этом сайте, но сейчас вернемся к самой форме.

Форма для ввода текста

В нашей форме должно быть поле для ввода текста. Оно создается с помощью тега . Добавим к нашей пустой форме поле ввода текста.

Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.

Для вставки пояснительного текста используется атрибут placeholder тега .

Сделаем 100% ширину с помощью CSS.

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

Элемент является универсальным, в отличии от элемента . С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.

Уже лучше, давайте добавим поле с адресом электронной почты.

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

  Текстовые поля

Давайте немного изменим форму, а именно:

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

 form  Текстовые поля

Ну что же, уже лучше. Не хватает кнопок.

Кнопки в HTML-форме

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка отправки формы на сервер создается с помощью тега .

Кнопка очистки формы

Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: .

Давайте дополним нашу форму.

 form 
 
Текстовые поля

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Проверка заполнения формы

Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Давайте разбираться как сделать простую проверку полей формы на заполнение.

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

 form 
 
Текстовые поля

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

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

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

Дополним нашу форму. Создадим отдельную группу элементов.

form

Текстовые поля

Иные элементы управления формой

Выбор даты

Выбрать дату можно с помощью типа date все того же input’а. Полный код: .

Добавим в нашу форму возможность выбора даты.

 form  
Текстовые поля    
 
Иные элементы управления формой

Выпадающий список

Выпадающий список создается с помощью тега < select >, а элемент списка с помощью < option >. Давайте создадим в нашей форме возможность указать адресата.

 form 
 
Текстовые поля    
 
Иные элементы управления формой

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

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Зависимый переключатель

Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

 form 
 
Текстовые поля    
 
Иные элементы управления формой

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

Анатолий Бузов

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Example

The Element

The HTML element is used to create an HTML form for user input:

The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The Element

The HTML element is the most used form element.

An element can be displayed in many ways, depending on the type attribute.

Type Description
Displays a single-line text input field
Displays a radio button (for selecting one of many choices)
Displays a checkbox (for selecting zero or more of many choices)
Displays a submit button (for submitting the form)
Displays a clickable button

All the different input types are covered in this chapter: HTML Input Types.

Text Fields

The defines a single-line input field for text input.

Example

A form with input fields for text:

This is how the HTML code above will be displayed in a browser:

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

The Element

Notice the use of the element in the example above.

The tag defines a label for many form elements.

The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the element, it toggles the radio button/checkbox.

The for attribute of the tag should be equal to the id attribute of the element to bind them together.

Radio Buttons

The defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

Choose your favorite Web language:

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

Checkboxes

The defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

The Submit Button

The defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

Example

A form with a submit button:

This is how the HTML code above will be displayed in a browser:

The Name Attribute for

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

This example will not submit the value of the «First name» input field:

Источник

Читайте также:  Java jtextfield only numbers
Оцените статью
© 2024 Программирование