HTML5 Custom Form_Motor Node College College

В HTML5 есть различные ящики для ввода и кнопки. и атрибуты.

Тип -это текст, который входной элемент представляет собой одностороннее текстовое поле, которое является проявлением входного элемента по умолчанию. Одно -линейное поле текста ввода поддерживает следующие настройки атрибута.

Атрибут MaxLength устанавливает максимальное количество символов, которые пользователи могут ввести;

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input maxlenth = 10 id = name = name = name/> </p> </p> p > <Метка для = Город> Город: <Размер ввода = 10 ID = город = город/> </p> <p> <Метка для = любимого> фрукта: <размер ввода = 10 maxlenth = 10 10 id = любимое имя = Bad/> </label> </p> <button Type = отправить> отправить голос </button> </form>

Атрибуты значения могут указывать значение по умолчанию для ввода поле;

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input wackholder = ваше имя идентификатор имени = имя/> </p> <p> <p> <Метка для = город> Город: <input chaceholder = где вы живете id = city name = city/> </p> <p> <Метка для = Fave> Fave> <input value = Apple id = fave name = Fave/ > </Label> </p> <кнопка типа = отправить> отправить голосование </button> </form>

Эффект в хроме заключается в следующем:

При сбросе формы с помощью элемента кнопки браузер восстановит подсказки по позиционированию и значения по умолчанию в текстовом поле.

Атрибут списка может быть установлен на значение атрибута идентификатора элемента DataList, чтобы пользователь мог выбрать в списке, указанном элементом DataList. Элемент даталиста вновь добавлен в HTML5, чтобы предоставить множество значений, чтобы помочь пользователям ввести необходимые данные.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input wackholder = ваше имя идентификатор имени = имя/> </p> <p> <p> <Метка для = Город> Город: <input chaceholder = где вы живете id = city name = city/> </p> <p> <метка для = fave> st id = fave name = fave/> </label> < /p> <кнопка типа = отправить> отправить голосование </button> </form> <datalist id = fruit -list> <vitue value = apples label = lovely a pples/> <optain value = oranges> Обновления апельсинов </option> < Значение опции = вишня/> </datalist>

Каждый вариант в элементе данных представляет собой значение, которое может быть выбран пользователем.

Атрибут Readonly указывает, что текстовое поле считывается только, атрибут отключений указывает, что его нельзя отредактировать, и существуют различия в производительности внешнего вида.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = Adam отключил идентификатор имени = имя/> </p> <p> <p> <Метка для = город> город: <input value = boston readonly id = city name = city/> </p> <p> <метка для = fave> fruit: <input value = apple id = fave name = fave/> </Label> </p> <button type = отправить> отправить голосование </button> </form>

Эффект в хроме заключается в следующем:

Форма с свойством отключения установлена ​​в сером. Box, но это не влияет на эффект внешнего вида, и контент будет отправлен на сервер.

Входной элемент атрибута типа является пароль для ввода пароля. Входной элемент этого атрибута поддерживает следующие атрибуты:

1) maxlength: максимальное количество символов, которые пользователи могут ввести в поле пароля;

2) шаблон: используется для ввода регулярного выражения проверки;

3) Заполнитель: приглашение на необходимый тип данных;

4) Readonly: установите поле для пароля, чтобы прочитать только;

5) Требуется: пользователь должен ввести значение, в противном случае он не может пройти проверку ввода;

6) размер: установите его ширину через количество символов, видимых в указанном поле пароля;

7) Значение: установите начальное значение пароля.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/</p> <p> <p> <label = fave> fruit: <input value = apples id = fave name = fave/ </Label> </p> <button type = отправить> отправить голосование </button> </form>

Символы, введенные пользователем, отображаются как*в поле «Пароль», но следует отметить, что при отправке формы сервер получает четкий пароль. Рассмотрите возможность использования SSL/HTTPS в браузер, и содержимое связи между сервером зашифровано.

Свойство типа установлено, чтобы отправить, сбросить и кнопку для создания элемента кнопки, похожей на кнопку.

1) Отправить: генерируйте кнопку для отправки форм, атрибуты поддержки: Formaction, Formenctype, Formmethod, FormTarget и Formnovalidate.

2) сбросить: генерировать кнопку фиксированной формы;

3) Кнопка: генерируйте обычные кнопки без какой -либо работы.

Описание текст кнопки в 3 указан через атрибут значения.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/</p> <p> <p> <label = fave> fruit: <input value = apples id = fave name = fave/ </Label> </p> <input type = pospeat value = spect hoal/> <input type = reset value = resype = b utton value = my button/> </form>

Эффект в хроме заключается в следующем:

Разница между генерирующей кнопкой и использованием элемента кнопки с элементом Anput состоит в том, что последний можно использовать для отображения текста, содержащего текст. Однако, поскольку каждый браузер имеет одинаковый метод обработки входных элементов, а некоторые более старые браузеры (например, IE6) не могут правильно обрабатывать элемент кнопки, многие веб -сайты более склонны к использованию входных элементов.

Входной элемент атрибута типа принимает только значение. Атрибуты поддержки включают:

1) Список: указать элемент данных, который предоставляет рекомендуемое значение в текстовом поле, а его значение - значение идентификатора элемента данных;

2) мин: установить минимальное значение;

3) Макс: установить максимальное значение;

4) Readonly: только читать;

5) Требуется: это означает, что пользователь должен ввести значение;

6) Шаг: шаг регулировки значения вверх и вниз;

7) Значение: начальное значение указанного элемента.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/</p> <p> <p> <label = fave> fruit: <input value = apples id = fave name = fave/ > </Label> </p> <p> <label for = цена> $ за единицу в вашей области: <входной тип = number step = 1 мин = 0 max = 100 value = 1 id = name = name = price/> </Label> </p> <input type = отправить значение = отправить голосование/> </form>

Эффект в хроме заключается в следующем:

Используя входной элемент с атрибутом типа в диапазоне, пользователи могут использовать его только для выбора численного значения в указанной области.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/</p> <p> <p> <label = fave> fruit: <input value = apples id = fave name = fave/ </Label> </p> <p> <метка для = цена> $ за единицу в вашей области: 1 <тип ввода = диапазон step = 1 мин = 0 макс = 100 значения = 1 id = name = name = цена/100 </label> </p> <input type = отправить значение = отправить голосование/> </form>

Эффект в хроме заключается в следующем:

Атрибут типа - это флажок для представления флажества.

1) Проверено: выбирать по умолчанию;

2) Требуется: указывает, что пользователь должен проверить флажок;

3) Значение: Установите значение данных, представленное на сервер по умолчанию.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/</p> <p> <p> <label = fave> fruit: <input value = apples id = fave name = fave/ </Label> </p> <p> <label for = veggie> вы вегетарианцы: <input type = checkbox id = veggie = veggie/> veg etarian </label> </p> <input type = propect = значение = отправить голосование/> </form>

Эффект в хроме заключается в следующем:

Обратите внимание, что при использовании флажести флажок отправляется на сервер только при отправке флажества.

Входной элемент атрибута типа может использоваться для генерации набора однократных кнопок. Каждое радио представляет вариант, и в той же группе радио используется одно и то же имя. Группа кнопок с одной -выбеждением подходит для сцен с меньшим количеством параметров.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/> </p> <p> d> проголосуйте за ваш любимый фрукт </Legend> <метка для = Apples> <input type = Radio check value = apples id = amples name = fave/> apples </label> <label for = Orange> <input type = radio value = oranges id = Orange name = Fave/> Orange </label> <метка для = вишни > <input type = radio value = vherries id = wherries name = fave/> </label> </fieldset> </p> <input type = pospeat value = отправить голосование/> </form>

Эффект в хроме заключается в следующем:

Введите атрибут.

1) Список: указать элемент данных, который предоставляет рекомендуемое значение в текстовом поле, а его значение - значение идентификатора элемента данных;

2) maxlength: максимальное количество входных символов;

3) шаблон: укажите регулярное выражение для проверки ввода;

4) Заполнитель: укажите подсказку о требуемом типе данных;

5) Readonly: прочитайте текстовое поле и прочитайте только;

6) Требуется: указывает, что пользователь должен ввести значение;

7) размер: видимое количество символов;

8) Значение: начальное значение указанного элемента.

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

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password placeholder = min 6 символ = имя пароля = пароль/> </p> <p> <label = email = email> email> email: <input type = email [email protected] Id = имя электронной почты = электронная почта/> </p> <p> <p> <label for = tel> tel: <input type = tel wackholder = (xxx) -xxx- xxxx id = tel name = tel/> </ Label> </p> <p> <label for = url> Ваша домашняя страница: <input type = url id = url name = url/> </p> <input type = отправить значение = отправить голосование/> </form>

Эффект в хроме заключается в следующем:

Некоторые типы даты и времени ввода добавляются в HTML5, включая:

1) DateTime: Получите мир и время, включая информацию о часовом поясе;

2) DateTime-Local: получить локальную дату и время, не включает информацию о часовом поясе;

3) Дата: Получите локальную дату, без информации о времени и часовом поясе;

4) Месяц: Получите ежегодную и ежемесячную информацию, без дня, времени и информации о часовом поясе;

5) время: получить время;

6) неделя: получите текущую неделю.

Дополнительные атрибуты, поддерживаемые элементом ввода даты и времени, включают:

1) Список: указать элемент данных, который предоставляет рекомендуемое значение в текстовом поле, а его значение - значение идентификатора элемента данных;

2) мин: установить минимальное значение;

3) Макс: установить максимальное значение;

4) Readonly: только читать;

5) Требуется: пользователь должен ввести значение, в противном случае он не может пройти проверку ввода;

6) Шаг: шаг регулировки значения вверх и вниз;

7) Значение: начальное значение указанного элемента.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/</p> <p> <p> <label = fave> fruit: <input value = apples id = fave name = fave/ > </label> </p> <p> <label for = lastbuy> Когда вы последняя покупка: <input type = date id = lastbuy name = lastbuy/> </label> </p> <input type = отправить значение = отправить голосование/> </form>

Эффект в хроме заключается в следующем:

В настоящее время в большинстве браузеров не очень хорошо поддерживается входная коробка даты и времени.

Атрибутом типа является селектор цвета, а значение цвета представлено в формате 7 символов: начиная с#, и следующие два шестнадцати достижения, которые представляют значения трех основных цветов красного, зеленого и синего , например, значение красного, зеленого и синего, например, значения трех основных цветов красного, зеленого и синего, таких как #FF1234.

 <Form method = post action = http: // titan: 8080/form> <p> <label для = имя> Имя: <input value = amd отключен идентификатор имен = имя/> </p> <p> <Метка для = Пароль> Пароль: <input type = password wackholder = min 6 символ = имя пароля = пароль/</p> <p> <p> <label = fave> fruit: <input value = apples id = fave name = fave/ </Label> </p> <p> <label для = color> color: <input type = color name = color/> </p> </p. /форма>

Эффект в хроме заключается в следующем:

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

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

 <Form method = post action = http: // titan: 8080/form> <input type = hidden name = arportid value = 1234/<p> <label для = имя> Имя: <input value = amd Idabled = Имя Имя = name/> </label> </p> <p> <label for = пароль> пароль: <input type = password wackholder = min 6 charals id = password = password/> </lab el> </p> < p> <p> <метка для = Fave> Fruit: <input value = Apples id = fave name = fave/> </p> </p> <input type = отправить значение = отправить голосование/> </form>

Кнопка, сгенерированная элементом ввода типа изображения, отображается в виде значка, а форма отправляется после нажатия. Атрибуты поддержки включают:

1) ALT: предоставить текст объяснения элемента, который полезен для пользователей, которым необходимо использовать технологию помощи инвалидам;

2) Формация: тот же элемент кнопки;

3) FormeEncType: тот же элемент кнопки;

4) FormMethod: тот же элемент кнопки;

5) FormTarget: тот же элемент кнопки;

6) Formnovalidate: тот же элемент кнопки;

7) высота: установите высоту изображений в пикселях;

8) SRC: укажите URL -адрес изображения, который будет отображаться;

9) Ширина: установите ширину изображения в пикселе;

 <Form method = post action = http: // titan: 8080/form> <input type = hidden name = arportid value = 1234/<p> <label для = имя> Имя: <input value = amd Idabled = Имя Имя = name/> </label> </p> <p> <label for = пароль> пароль: <input type = password wackholder = min 6 charals id = password = password/> </lab el> </p> < p> <p> <label for = fave> fruit: <input value = apples id = fave name = fave/> </p> </p> <input type = image src = acceco.png name = pospot/> </> < /Форма "

Нажмите кнопку изображения, чтобы отправить форму.

Входной элемент файла -type используется для загрузки файлов, а файл может быть загружен на сервер при отправке формы. Атрибуты поддержки включают:

1) Принять: укажите тип принятия. Определение типа MIME, см. RFC 2046 (http://tools.ies.org/html/rfc2046);

2) несколько: установить этот атрибут для загрузки нескольких файлов за один раз;

3) Требуется: пользователь должен ввести значение.

 <Form method = post action = http: // titan: 8080/form ectype = multipart/form-data> <p> <label для = имя> Имя: <Входное значение = Адам отключен идентификатор = имя Na me = name/> </label> </p> <p> <label для = пароль> пароль: <input type = password plants = min 6 символ = имя пароля = пароль/> </p> <p> <lab el for = fave> Fruit: <input value = apples id = fave name = fave/> </p> <p> <input type = file name = filedata/> </p> <input type = propect value = posive hoal/> </form >

Обратите внимание, что тип кода формы может быть загружен при загрузке Multipart/Form-Data. Эффект в хроме заключается в следующем:

Элемент Selet используется для создания списка параметров, который является более компактным, чем входной элемент типа Radiiiiiobutton, и более подходящий для ситуации с большим количеством опций. Атрибут, поддерживаемый этим элементом, включает в себя:

1) Имя: имя списка;

2) Отключено: отключить список падения -дальней;

3) форма: одна или несколько форм, принадлежащих к текстовой области;

4) Автофокус: текстовая область автоматически получает фокус после загрузки страницы;

5) Требуется: должно быть заполнено;

6) размер: количество параметров можно увидеть в списке падения;

7) Несколько: вы можете выбрать несколько вариантов.

Выбрать элемент по умолчанию -это один списк DROD -DOWNECTION

 <Form method = post action = http: // titan: 8080/form ectype = multipart/form-data> <p> <label для = имя> Имя: <Входное значение = Адам отключен идентификатор = имя Na me = name/> </label> </p> <p> <label для = пароль> пароль: <input type = password plants = min 6 символ = имя пароля = пароль/> </p> <p> <lab el for = fave> Любимый фрукт: <select id = fave name = fave> <option valu = яблоки выбранные label = яблоки> яблоки </option> <value = value = Orange = Orange> Operages </option> <valie Value = вишня метка = вишня> вишня </option> <vitue value = pears label = pears> pears> </option> </select> </p> <input type = отправить значение = отправить голосование/> m>

Эффект в хроме заключается в следующем:

После настройки атрибутов размера и нескольких атрибутов для списка он становится флажкой.

 <Form method = post action = http: // titan: 8080/form ectype = multipart/form-data> <p> <label для = имя> Имя: <Входное значение = Адам отключен идентификатор = имя Na me = name/> </label> </p> <p> <label для = пароль> пароль: <input type = password plants = min 6 символ = имя пароля = пароль/> </p> <p> <lab el for = fave> Любимый фрукт: <select id = fave name = fave size = 5 множественное> <vitue value = apples selectd label = apples> яблоки </option> <опция> es label = Orange> Orange </option> <опция Valu = вишня метка = Вишня> вишня </option> <vitue value = pears label = pears> Pears </option> </select> </p> <input type = отправить значение = отправить голосование/> </form>

Нажмите клавишу CTRL, когда вы нажмете опцию, чтобы выбрать несколько параметров. Эффект в хроме заключается в следующем:

Элементы OPTGROUP могут использоваться для установления определенной структуры в содержании элемента SELECT.

1) метка: он используется для предоставления небольшого заголовка для всего набора опций;

2) Отключено: любые параметры в группе в группе.

 <Form method = post action = http: // titan: 8080/form ectype = multipart/form-data> <p> <label для = имя> Имя: <Входное значение = Адам отключен идентификатор = имя Na me = name/> </label> </p> <p> <label для = пароль> пароль: <input type = password plants = min 6 символ = имя пароля = пароль/> </p> <p> <lab el for = fave> Любимый фрукт: <select id = fave name = fave> <optgroup label = top варианты> <опция valu = яблоки выбранные метки = яблоки> яблоки </option> ион valu = oranges label = oranges> Orange </option> </optgroup > <optGroup label = другие> <опция valu = wherries label = cherries> вишни </option> <value = value = pears label = pears> pears </option> tgroup> </select> </label> </p> < Тип ввода = отправить значение = отправить голосование/> </form>

Эффект в хроме заключается в следующем:

Элементы OptGroup играют только организационную роль, и пользователи не могут выбрать ее в качестве опции.

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

1) Автофокус: текстовая область автоматически получает фокус после загрузки страницы;

2) Cols: видимая ширина, целое число;

3) отключено: отключить эту текстовую область;

4) форма: одна или несколько форм, принадлежащих к текстовой области;

5) максимальная длина: максимальное количество символов в текстовой области;

6) Имя: имя текстовой области;

7) Заполнитель: короткое напоминание о ожидаемом значении текстовой области;

8) readonly: текстовая область читается только;

9) Требуется: текстовая область необходима;

10) ряды: количество видимых строк в текстовой области, целое число;

11) Обертка: как изменить текст в текстовой области, в том числе: Soft (по умолчанию).

 <Form method = post action = http: // titan: 8080/form ectype = multipart/form-data> <p> <label для = имя> Имя: <Входное значение = Адам отключен идентификатор = имя Na me = name/> </label> </p> <p> <label для = пароль> пароль: <input type = password plants = min 6 символ = имя пароля = пароль/> </p> <p> <lab el for = fave> Любимый фрукт: <select id = fave name = fave> <optgroup label = top варианты> <опция valu = яблоки выбранные метки = яблоки> яблоки </option> ион valu = oranges label = oranges> Orange </option> </optgroup > <optGroup label = другие> <опция valu = wherries label = cherries> вишни </option> <value = value = pears label = pears> pears </option> tgroup> </select> </label> </p> < p> <textARea cols = 20 Rows = 5 wrap = hard id = name name = story> скажите нам, почему это ваш фаворит </textarea> </p> <input type = отправить va lue = отправить голосование/> </form >

Эффект в хроме заключается в следующем:

Выходной элемент представляет результат расчета. Атрибуты поддержки включают:

1) для: одного или нескольких элементов, связанных с выходной доменом, отдельно в среднем пространстве;

2) форма: одна или несколько форм поля ввода;

3) Имя: единственное имя объекта (используется при подаче формы).

 <Form onsubmit = return false onput = res.value = Quant.valueasnumber * price.valueasnumber> <fieldset> <Легенда> Калькулятор цен </legend> t type = number wareholder = количество идентификатор количества = Quant = Quant/> <тип ввода = Номер заполнителя = идентификатор цены = name = name = price/> = <output для = name name = name = res/> </form>

Система времени JavaScript используется для создания простого калькулятора.

Приведенное выше содержимое этой статьи.