Инпут (богиня)

Выбор даты

HTML 4 не включает выбор даты через календарь. JavaScript-фреймворки позволяют это обойти (Dojo, jQuery UI, YUI, Closure Library), но, конечно, каждое из этих решений требует «внедрения» фреймворка для любого встроенного календаря.

HTML5, наконец, определяет способ включить встроенный выбор даты без всяких скриптов. В действительности, их шесть: дата, месяц, неделя, время, дата + время и дата + время с часовым поясом.

Пока поддержка… скудна.

Поддержка выбора даты

Тип	Opera	Другие браузеры
type=»date»	9.0+	—
type=»month»	9.0+	—
type=»week»	9.0+	—
type=»time»	9.0+	—
type=»datetime»	9.0+	—
type=»datetime-local»	9.0+	—

Вот как Opera отображает <input type=»date»>:

Если вам нужно время вместе с датой, Opera также поддерживает <input type=»datetime»>:

Если вам нужен месяц плюс год (например, срок действия кредитной карты), Opera может отобразить <input type=»month»>:

Менее распространенным, но доступным является выбор недели в году через <input type=»week»>:

Последнее, но не менее важное, это выбор времени с :

Выбор даты с альтернативой

<form>
<input type=»date»>
</form>
…
<script>
var i = document.createElement(«input»);
i.setAttribute(«type», «date»);
if (i.type == «text») {
// Нет встроенной поддержки выбора даты 🙁
// Используйте Dojo/jQueryUI/YUI/Closure для ее создания,
// затем динамически замените элемент <input>
}
</script>

Примеры получения/ввода данных из консоли/клавиатуры.

• ;
• ;
• .

Общие примеры использования функции .

>>> x = input('Enter your name:')
# Enter your name:Anton
>>> print('Hello, ', x)
# Hello,  Anton

# Можно и без строки подсказки
>>> print('Введите число:')
# Введите число:
>>> x = input()
# 10

# Не забываем что функция 
# возвращает строку
>>> x
# '10'

Проверка и преобразование типов при вводе данных с клавиатура.

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

# test.py 

def str_to_num(line):
    """функция конвертирует строку в число"""
    line = line.strip()
    # если в строке только цифры
    if line.isdigit():
        return int(line) 
    # если строка содержит точку или запятую
    elif '.' in line or ',' in line
        # если из строки убрать точку или запятую
        # и при этом в строке останутся только цифры
        if any(line.replace(x, '').isdigit() for x in '.', ',']):
            return float(line.replace(',', '.'))
    else
        # ошибка
        print('Это не число!\n')
        return None

print('\nДля выхода из программы введите Ctrl+C')
print('Для окончания ввода цифр нажмите Enter\n')

nums = []
while True
    inpt = input('Ожидается ввод числа или Enter:')
    if inpt == ''
        # Закончить ввод чисел
        break
    n = str_to_num(inpt)
    if n is not None
        nums.append(n)

if nums
    if len(nums) == 1
        print('Вы ввели одну цифру: ', nums])
    else
        print('\nВыберите действие:')
        print('  сложить цифры введите 1;')
        print('  умножить цифры введите 2.\n')

        rez = None
        while True
            inpt = input('Введите 1 или 2:')
            inpt = inpt.strip()
            if inpt == '1'
                rez = sum(nums)
                print('Сумма введенных чисел:', rez)
            elif inpt == '2'
                rez = 1
                for i in nums
                    rez *= i
                print('Произведение введенных чисел:', rez)
            else
                print('Неправильное действие.\n')
            
            if rez is not None
                break
else
    print('Вы ничего не ввели.')

Вывод программы:

$ python3 test.py 

Для выхода из программы введите Ctrl+C
Для окончания ввода цифр нажмите Enter

Ожидается ввод числа или Enter:10
Ожидается ввод числа или Enter:13.9
Ожидается ввод числа или Enter:9,9
Ожидается ввод числа или Enter:

Выберите действие:
  сложить цифры введите 1;
  умножить цифры введите 2.

Введите 1 или 2:2
Произведение введенных чисел: 1376.1000000000001

Эмуляция терминала с использованием функцией .

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

# test.py
import sys, traceback

def run_user_code(envdir):
    source = input(">>> ")
    try
        # Выполнение введенного кода с клавиатуры
        exec(source, envdir)
    except Exception
        print("Exception in user code:")
        print("-"*60)
        traceback.print_exc(file=sys.stdout)
        print("-"*60)

# словарь для хранения введенных переменных
envdir = {}

while True
    run_user_code(envdir)

Запускаем эмуляцию интерпретатора Python.

$ python3 test.py
>>> a = 3
>>> b = '1'           
>>> a + b
Exception in user code:
------------------------------------------------------------
Traceback (most recent call last):
  File "tt.py", line 6, in run_user_code
    exec(source, envdir)
  File "<string>", line 1, in <module>
TypeError: unsupported operand type(s) for +: 'int' and 'str'
------------------------------------------------------------

Form types

How an works varies considerably depending on the value of its attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is .

The available types are as follows:

• : A push button with no default behavior.
• : A check box allowing single values to be selected/deselected.
• : HTML5 A control for specifying a color. A color picker’s UI has no required features other than accepting simple colors as text ().
• : HTML5 A control for entering a date (year, month, and day, with no time).
• : HTML5 A control for entering a date and time, with no time zone.
• : HTML5 A field for editing an e-mail address.
• : A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
• : A control that is not displayed but whose value is submitted to the server.
• : A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.
• : HTML5 A control for entering a month and year, with no time zone.
• : HTML5 A control for entering a number.
• : A single-line text field whose value is obscured. Use the maxlength and minlength attributes to specify the maximum length of the value that can be entered.

  Note: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see Insecure passwords. Other browsers are also implementing similar mechanisms.

• : A radio button, allowing a single value to be selected out of multiple choices.
• : HTML5 A control for entering a number whose exact value is not important.
• : A button that resets the contents of the form to default values.
• : HTML5 A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.
• : A button that submits the form.
• : HTML5 A control for entering a telephone number.
• : A single-line text field. Line-breaks are automatically removed from the input value.
• : HTML5 A control for entering a time value with no time zone.
• : HTML5 A field for entering a URL.
• : HTML5 A control for entering a date consisting of a week-year number and a week number with no time zone.

Some input types are now obsolete:

datetime (en-US): HTML5 This deprecated API should no longer be used, but will probably still work.This is an obsolete API and is no longer guaranteed to work. A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. This feature has been removed from WHATWG HTML.

Methods

The following methods are provided by the (en-US) interface which represents elements in the DOM. Also available are those methods specified by the parent interfaces, , , , and (en-US).

Immediately runs the validity check on the element, triggering the document to fire the (en-US) event at the element if the value isn’t valid.

Returns if the element’s value passes validity checks; otherwise, returns .

(en-US)

Selects the entire content of the element, if the element’s content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.

Sets a custom message to display if the input element’s value isn’t valid.

(en-US)

Sets the contents of the specified range of characters in the input element to a given string. A parameter is available to allow controlling how the existing content is affected.

(en-US)

Selects the specified range of characters within a textual input element. Does nothing for inputs which aren’t presented as text input fields.

(en-US)

Decrements the value of a numeric input by one, by default, or by the specified number of units.

(en-US)

Increments the value of a numeric input by one or by the specified number of units.

Input Type Hidden

The
defines a hidden input field (not visible to a user).

A hidden field let web developers include data that cannot be seen or
modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated
when the form is submitted.

Note: While the value is not displayed to the user in the
page’s content, it is visible (and can be edited) using any browser’s developer
tools or «View Source» functionality. Do not use hidden inputs as a form of
security!

Example

<form>  <label for=»fname»>First name:</label> 
<input type=»text» id=»fname» name=»fname»><br><br>  <input
type=»hidden» id=»custId» name=»custId» value=»3487″>  <input
type=»submit» value=»Submit»></form>

Окно поиска

Итак, поиск. Не только поиск от Google или Yahoo (ну, те тоже). Подумайте о любом окне поиска, на любой странице, на любом сайте. Амазон имеет окно поиска, Яндекс имеет окно поиска, большинство блогов тоже. Как они сделаны? <input type=»text»>, как и любое другое текстовое поле в сети. Давайте это исправим.

Поиск нового поколения

<form>
<input name=»q» type=»search»>
<input type=»submit» value=»Найти»>
</form>

В некоторых браузерах вы не заметите никакого отличия от обычного текстового поля. Но если вы используете Safari на Mac OS X, это будет выглядеть так.

Нашли разницу? Поле ввода имеет закругленные углы! Я знаю, знаю, вы вряд ли можете сдержать свои чувства. Но подождите, это еще не все! Когда вы начнете вводить в поле type=»search» Safari вставит небольшую кнопку «x» с правой стороны окна. Нажатие на «x» очищает содержимое поля. Google Chrome, который имеет под капотом ту же технологию, ведет себя так же. Обе эти маленькие хитрости выглядят и ведут себя аналогично родному поиску в iTunes и других клиентских приложениях Mac OS X.

Apple.com использует <input type=»search»> для поиска по своему сайту, чтобы помочь сайту передать «маколюбное» ощущение. Но здесь нет ничего специфичного для Маков. Это просто код, так что каждый браузер на любой платформе может выбрать, как отображать в соответствии с соглашениями платформы. Как и со всеми другими новыми типами, браузеры, которые не признают type=»search» будут относиться к нему как type=»text», так что нет абсолютно никаких причин не начать использовать type=»search» для всех ваших окон поиска прямо сегодня.

Профессор Маркап говорит

По умолчанию Safari не применяет к большинство стилей. Если вы хотите заставить Safari понимать поле для поиска как обычное текстовое поле (чтобы применить собственные стили), добавьте это правило к вашей таблице стилей.

input {
-webkit-appearance: textfield;
}

Спасибо Джону Лейну за обучение меня этому трюку.

Позволяет производить ввод данных в консоли.

Описание:

Функция позволяет обеспечить ввод пользовательских данных из консоли. Если передан необязательный аргумент подсказки , то он записывается в стандартный вывод без завершающей строки. Затем функция читает строку из ввода и преобразует ее в СТРОКУ, убирая завершающий символ строки и возвращает ее в качестве значения.

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

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

• В случае считывания (признак конца файла), поднимается исключение .
• Перед чтением ввода, функция вызывает событие аудита с аргументом .
• После успешного чтения ввода, вызывает событие аудита c результатом .

Notes

If you want to present a custom error message when a field fails to validate, you need to use the available on (and related) elements. Take the following form:

The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the .

If you wanted to instead display custom error messages, you could use JavaScript like the following:

The example renders like so:

In brief:

• We check the valid state of the input element every time its value is changed by running the method via the event handler.
• If the value is invalid, an event is raised, and the event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn’t match the pattern, using an block, and set a custom validity error message.
• As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.
• If it is valid, it will submit as you’d expect. For this to happen, the custom validity has to be cancelled, by invoking with an empty string value. We therefore do this every time the event is raised. If you don’t do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.

Note: Firefox supported a proprietary error attribute — — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see bug 1513890).

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

Firefox uses the following heuristics to determine the locale to validate the user’s input (at least for ):

• Try the language specified by a / attribute on the element or any of its parents.
• Try the language specified by any Content-Language HTTP header or
• If none specified, use the browser’s locale.

You can use the attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a «Next» label, you can do this:

The result is:

Note the «Next» key in the lower-right corner of the keyboard.

Валидация форм

Поддержка валидации форм

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
—	4.0+	5.0+	6.0+	9.0+	—	—

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

Есть две большие проблемы, связанные с проверкой адреса электронной почты на JavaScript:

1. Некоторое количество ваших посетителей (вероятно, около 10%) не включают JavaScript.
2. Вы получите адрес неправильно.

Серьезно, вы получите адрес неправильно. Определение того, что набор случайных символов это корректный адрес электронной почты невероятно сложно. Чем сильнее вы смотрите, тем сложнее становится. Я уже говорил, что это очень, очень сложно? Не проще ли повесить эту головную боль на ваш браузер?

HTML5 также предлагает проверку веб-адресов с полем и чисел с

Проверка чисел принимает во внимание значения атрибутов min и max, поэтому браузеры не позволят вам отправить форму, если вы вводите слишком большое число

Не существует кода, включающего проверку форм в HTML5, это делается по умолчанию. Чтобы отключить проверку, используйте атрибут novalidate.

Не проверяй меня

Браузеры медленно включают поддержку проверки форм в HTML5. Firefox 4 будет иметь полную поддержку. К сожалению, Safari и Chrome реализуют лишь частично: они проверяют элементы форм, но не выводят никаких видимых сообщений, когда поля формы не проходит проверку. Другими словами, если вы введете неверную (или неправильно составленную) дату в , Safari и Chrome не отправит форму, но и не будет говорить вам, почему это не сделали. Они будут устанавливать фокус на поле, которое содержит недопустимое значение, но не отображать сообщение об ошибке, как Opera или Firefox 4.

Input Type Reset

defines a reset button
that will reset all form values to their default values:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit» value=»Submit»>  <input type=»reset»></form>

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

If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.

Скрыть / показать элементы при установке флажка

Большинство из вас встречало формы с разделом, который отображается после установки флажка чекбокса. Для реализации данного решения будем использовать jQuery.

<div>
<form action="">
   <input type="text"name="name"placeholder="name">
 
   <input type="email"name="email"placeholder="abcd@abcd.com">
 
<labelfor="more-info">show moreinfo</label>
<input id="more-info"name="more-info"type="checkbox">
<div id="conditional_part">
<textarea name="message"cols="30"rows="10"></textarea>
</div>
</form>
</div>

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

Когда флажок чекбокса установлен, текстовая область отображается. Поэтому по умолчанию она должна быть скрыта. Для этого мы создаем скрытый контейнер div (с id conditional_part):

#conditional_part
{
  display:none;
}

Следующий шаг — создание JavaScript- кода, который будет отображать и скрывать эту текстовую область.

$('#more_info').change(function(){
    if(this.checked!=true){
          $("#conditional_part").hide();
     }
  else{
        $("#conditional_part").show();
  }
});

К checkbox с идентификатором more-info мы привязываем событие onchange, которое запускает анонимную функцию при возникновении события.

Внутри анонимной функции используется оператор if. Он проверяет, установлен ли флажок чекбокса или нет. Затем мы применяем jQuery- функции hide() и show(). Они изменяют значения свойства display блока div с идентификатором conditional_part.

Данная публикация является переводом статьи «How to handle HTML checkbox events» , подготовленная редакцией проекта.

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

Первое на что стоит обратить внимание, что тег не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type

• name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
• type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
  • text — текстовое поле. Одно из самых часто используемых значений
  • password — текстовое поле, но с той особенностью, что при вводе символы скрыты
  • radio — радиокнопки
  • checkbox — переключатели
  • submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
  • reset — кнопка для очистки всей формы
  • hidden — скрытое поле
  • button — кнопки для обработки каких-то действий (не путать с submit!)
  • file — для загрузки файлов на сервер
  • image — поле с изображением (используется крайне редко)
• value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Input Cards

Header

Example

<div class=»w3-card-4″><div class=»w3-container
w3-green»>  <h2>Header</h2></div><form class=»w3-container»><label>First Name</label><input class=»w3-input»
type=»text»>
<label>Last Name</label><input class=»w3-input»
type=»text»></form></div>

Colored Labels

Use any of the w3-text-color classes to color your labels:

Example

<form class=»w3-container»><label
class=»w3-text-blue»><b>First Name</b></label>
<input class=»w3-input w3-border» type=»text»> 
<label
class=»w3-text-blue»><b>Last Name</b></label>
<input class=»w3-input w3-border» type=»text»><button class=»w3-btn
w3-blue»>Register</button> </form>

Add the w3-border class to create bordered inputs:

Example

<input class=»w3-input w3-border»
type=»text»>

Rounded Borders

Use any of the w3-round classes to create rounded borders:

Example

<input class=»w3-input w3-border w3-round»
type=»text»><input class=»w3-input w3-border
w3-round-large»
type=»text»>

Borderless Input

The w3-input class has a bottom border by default. If you want a borderless input, add the w3-border-0 class:

Example

<form class=»w3-container w3-light-grey»>  <label>First
Name</label>  <input class=»w3-input w3-border-0″ type=»text»>  <label>Last Name</label>  <input class=»w3-input
w3-border-0″ type=»text»></form>

Input Form

Example

<div class=»w3-container w3-teal»>  <h2>Input Form</h2></div><form class=»w3-container»>  <label class=»w3-text-teal»><b>First Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <label class=»w3-text-teal»><b>Last Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <button class=»w3-btn w3-blue-grey»>Register</button></form>

Hoverable inputs

The w3-hover-color classes adds a background color to the input field on mouse-over:

Example

<input class=»w3-input w3-hover-green» type=»text»><input class=»w3-input
w3-border w3-hover-red» type=»text»><input class=»w3-input
w3-border w3-hover-blue» type=»text»>

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled
selected>Choose your option</option>  <option value=»1″>Option
1</option>  <option value=»2″>Option 2</option>  <option
value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>   
<input class=»w3-input w3-border» type=»text» placeholder=»One»> 
</div>  <div class=»w3-third»>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-third»>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>   
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

❮ Previous
Next ❯

See also

• Other form-related elements: <form> (en-US), <button> (en-US), <datalist> (en-US), <legend> (en-US), <label> (en-US), <select> (en-US), <optgroup> (en-US), <option> (en-US), <textarea> (en-US), <keygen> (en-US), <fieldset> (en-US), , <progress> (en-US) and <meter> (en-US).
• Form constraint validation
• Cross-browser HTML5 placeholder text
• The CSS (en-US) property
• In certain cases (typically involving non-textual inputs and specialized interfaces), the element is a replaced element. When it is, the position and size of the element’s size and positioning within its frame can be adjusted using the CSS (en-US) and properties

The most basic form field

The element is the fundamental form element for gathering user info through forms. The vast majority of form fields are the element, and there are only a handful of form field types — , for example — that are actually a different element. From range sliders to date selectorsto submit buttons, the element covers a lot of different cases.

Because of that, it also has a huge number of attributes and potential values. Many of them are only applicable to certain types of inputs. There are a handful that are universally important, though:

• The attribute determines the type, or style, of the element. This is the most important attribute, as it determines everything else about how the element behaves.
• The is used in conjunction with the attribute to send user data to the server.
• Setting the attribute in your HTML document allows you to pre-specify the content of the input field, or its default value
• Both and stop the user from editing the value of the input, but there are some important difference to know about.
• Including the stops the form from accepting submission if the field has no value.

See the lists below for more details about options.

Числа как счетчики

Следующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -1? Нет, я имел в виду число между 1 и 10,7 ½? Нет, нет, не дробь, тупица. π? Теперь вы просто выбрали иррациональное число.

Хочу заметить, у вас не часто спрашивают «просто число». Более вероятно, что будут просить число в определенном диапазоне. Вы можете только захотеть, чтобы в пределах этого диапазона были определенные типы чисел — может быть, целые числа, но не дроби или десятичные числа или что-то более экзотическое, например, кратные 10. HTML5 все это охватывает.

Выбрать число, почти любое

<input type=»number»
min=»0″
max=»10″
step=»2″
value=»6″>

Рассмотрим по одному атрибуту.

• type=»number» означает, что это числовое поле.
• min=»0″ указывает минимально допустимое значение для этого поля.
• max=»10″ является максимально допустимым значением.
• step=»2″ в сочетании с минимальным значением определяет допустимые числа в диапазоне: 0, 2, 4 и так далее, вплоть до максимального значения.
• value=»6″ значение по умолчанию. Должно выглядеть знакомым, этот же атрибут всегда используется для определения значений полей формы. Я упоминаю здесь об этом для отправной точки, что HTML5 основывается на предыдущих версиях HTML. Вам не нужно переучиваться, чтобы делать то, что вы уже делали.

Это код числового поля. Имейте в виду, что все эти атрибуты являются необязательными. Если у вас задан минимум, но не максимум, можете указать атрибут min, но не max. По умолчанию значение шага равно 1 и вы можете опустить атрибут step, пока не понадобится другое значение шага. Если нет значения по умолчанию, то атрибут value может быть пустой строкой или даже вообще опущен.

Но HTML5 не останавливается на достигнутом. За ту же самую низкую, низкую цену свободы вы получаете эти удобные методы JavaScript.

• input.stepUp(n) повышает значение поля на n.
• input.stepDown(n) понижает значение поля на n.
• input.valueAsNumber возвращает текущее значение как число с плавающей точкой (свойство input.value это всегда строка).

Проблемы с отображением? Ну, правильный интерфейс по управлению числами в браузерах реализован по-разному. На iPhone, где набор имеет сложности, браузер опять оптимизирует виртуальную клавиатуру для ввода чисел.

В настольной версии Оперы поле type=»number» отображается как счетчик с небольшими стрелками вверх и вниз, которые можно нажать для изменения значений.

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

Как и со всеми другими полями ввода, что я обсуждал в этой главе, браузеры, которые не поддерживают type=»number», будут относиться к нему как к type=»text». Значение по умолчанию будет отображаться в поле (так как оно хранится в атрибуте value), но другие атрибуты, такие как min и max будут игнорироваться. Вы можете свободно реализовать их самостоятельно или использовать JavaScript-фреймворк, который уже реализует управление счетчиком. Вначале проверьте встроенную поддержку HTML5, как здесь.

if (!.inputtypes.number) {
// нет встроенной поддержки для поля type=number
// может попробовать Dojo или другой JavaScript-фреймворк
}

Input Type Date

The is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example

<form>  <label for=»birthday»>Birthday:</label>  <input
type=»date» id=»birthday» name=»birthday»></form>

You can also use the and attributes to add restrictions to dates:

Example

<form>  <label for=»datemax»>Enter a date before
1980-01-01:</label>  <input type=»date» id=»datemax» name=»datemax»
max=»1979-12-31″><br><br>  <label for=»datemin»>Enter a date after
2000-01-01:</label>  <input type=»date» id=»datemin» name=»datemin»
min=»2000-01-02″></form>

Colors

Feel free to use your favorite styles and colors:

Input Form

Example

<div class=»w3-container w3-teal»>  <h2>Input Form</h2></div><form class=»w3-container»>  <label class=»w3-text-teal»><b>First Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <label class=»w3-text-teal»><b>Last Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <button class=»w3-btn w3-blue-grey»>Register</button></form>

Hoverable inputs

The w3-hover-color classes adds a background color to the input field on mouse-over:

Example

<input class=»w3-input w3-hover-green» type=»text»><input class=»w3-input
w3-border w3-hover-red» type=»text»><input class=»w3-input
w3-border w3-hover-blue» type=»text»>

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled
selected>Choose your option</option>  <option value=»1″>Option
1</option>  <option value=»2″>Option 2</option>  <option
value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>   
<input class=»w3-input w3-border» type=»text» placeholder=»One»> 
</div>  <div class=»w3-third»>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-third»>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>   
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

❮ Previous
Next ❯