Html формы

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Обязательные поля

Поддержка <input required>
IE Firefox Safari Chrome Opera iPhone Android
4.0+ 9.0+

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

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

<form>
<input id=»q» required>
<input type=»submit» value=»Search»>
</form>

Браузеры могут изменить внешний исходный вид обязательного поля. Вот к примеру, как это выглядит в Mozilla Firefox 4.0.

Кроме того, если вы пытаетесь отправить форму без заполнения обязательного значения, Firefox выведет информационную панель, говорящую, что поле является обязательным и не может быть пустым.

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>

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>

HTML тег

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

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

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

  • name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
  • type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:

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

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

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

Поддержка валидации форм
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 Submit

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

The form-handler is typically a server page with a script for processing
input data.

The form-handler is specified in the form’s
attribute:

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»></form>

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

If you omit the submit button’s value attribute, the button will get a default text:

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»></form>

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

Следующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -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 Restrictions

Here is a list of some common input restrictions:

Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type=»checkbox» or type=»radio»)
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:

Example

<form>  <label for=»quantity»>Quantity:</label>  <input
type=»number» id=»quantity» name=»quantity» min=»0″ max=»100″ step=»10″
value=»30″></form>

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

The formaction Attribute

The input attribute specifies the URL of
the file that will process the input when the form is submitted.

Note: This attribute overrides the attribute of the element.

The attribute works with the
following input types: submit and image.

Example

An HTML form with two submit buttons, with different actions:

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label>  <input type=»text» id=»fname» name=»fname»><br><br> 
<label for=»lname»>Last name:</label>  <input type=»text» id=»lname»
name=»lname»><br><br>  <input type=»submit» value=»Submit»> 
<input type=»submit» formaction=»/action_page2.php» value=»Submit as Admin»>
</form>

The formenctype Attribute

The input attribute specifies how the form-data should be encoded when submitted (only for forms with method=»post»).

Note: This attribute overrides the enctype attribute of the element.

The attribute works with the
following input types: submit and image.

Example

A form with two submit buttons. The first sends the form-data with default encoding,
the second sends the form-data encoded as «multipart/form-data»:

<form action=»/action_page_binary.asp» method=»post»>  <label for=»fname»>First
name:</label>  <input type=»text» id=»fname» name=»fname»><br><br> 
<input type=»submit» value=»Submit»>  <input type=»submit»
formenctype=»multipart/form-data»  value=»Submit as
Multipart/form-data»></form>

The formmethod Attribute

The input attribute defines the HTTP method for sending form-data to the action URL.

Note: This attribute overrides the method attribute of the element.

The attribute works with the
following input types: submit and image.

The form-data can be sent as URL variables (method=»get») or as an HTTP post
transaction (method=»post»).

Notes on the «get» method:

  • This method appends the form-data to the URL in name/value pairs
  • This method is useful for form submissions where a user want to bookmark
    the result
  • There is a limit to how much data you can place in a URL (varies between
    browsers), therefore, you cannot be sure that all of the form-data will be
    correctly transferred
  • Never use the «get» method to pass sensitive information! (password or
    other sensitive information will be visible in the browser’s address bar)

Notes on the «post» method:

  • This method sends the form-data as an HTTP post transaction
  • Form submissions with the «post» method cannot be bookmarked
  • The «post» method is more robust and secure than «get», and «post» does
    not have size limitations

Example

A form with two submit buttons. The first sends the form-data with
method=»get». The second sends the form-data with method=»post»:

<form action=»/action_page.php» method=»get»>  <label for=»fname»>First
name:</label>  <input type=»text» id=»fname» name=»fname»><br><br> 
<label for=»lname»>Last name:</label>  <input type=»text» id=»lname»
name=»lname»><br><br>  <input type=»submit» value=»Submit using
GET»>  <input type=»submit» formmethod=»post» value=»Submit using
POST»></form>

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

  • ;
  • ;
  • .

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

>>> 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'
------------------------------------------------------------

Attributes

Attribute Value Description
accept file_extension
audio/*
video/*
image/*media_type
Specifies a filter for what file types the user can pick from the file
input dialog box (only for type=»file»)
alt text Specifies an alternate text for images (only for type=»image»)
autocomplete on
off
Specifies whether an <input> element should have autocomplete enabled
autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads
checked checked Specifies that an <input> element should be pre-selected when the page loads (for type=»checkbox» or type=»radio»)
dirname inputname.dir Specifies that the text direction will be submitted
disabled disabled Specifies that an <input> element should be disabled
form form_id Specifies the form the <input> element belongs to
formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for type=»submit» and type=»image»)
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be encoded when submitting it to the server (for type=»submit» and type=»image»)
formmethod getpost Defines the HTTP method for sending data to the action URL (for type=»submit» and type=»image»)
formnovalidate formnovalidate Defines that form elements should not be validated when submitted
formtarget _blank
_self
_parent
_topframename
Specifies where to display the response that is received after submitting the form (for type=»submit» and type=»image»)
height pixels Specifies the height of an <input> element (only for type=»image»)
list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
max number
date
Specifies the maximum value for an <input> element
maxlength number Specifies the maximum number of characters allowed in an <input> element
min number
date
Specifies a minimum value for an <input> element
minlength number Specifies the minimum number of characters required in an <input> element
multiple multiple Specifies that a user can enter more than one value in an <input> element
name text Specifies the name of an <input> element
pattern regexp Specifies a regular expression that an <input> element’s value is checked against
placeholder text Specifies a short hint that describes the expected value of an <input> element
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled out before submitting the form
size number Specifies the width, in characters, of an <input> element
src URL Specifies the URL of the image to use as a submit button (only for
type=»image»)
step numberany Specifies the interval between legal numbers in an input field
type button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Specifies the type <input> element to display
value text Specifies the value of an <input> element
width pixels Specifies the width of an <input> element (only for type=»image»)

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

Описание:

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

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

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

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

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.

Обработка исключений ввода

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

Вот такой код считается небезопасным:

Запустим его и введем следующее:

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

Вот как можно сделать код безопаснее и обработать ввод:

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

Вот так будет выглядеть вывод с исключением.

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

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

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

The formtarget Attribute

The input attribute specifies a name or a keyword that indicates where
to display the response that is received after submitting the form.

Note: This attribute overrides the target attribute of the element.

The attribute works with the
following input types: submit and image.

Example

A form with two submit buttons, with different target windows:

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label>  <input type=»text» id=»fname» name=»fname»><br><br> 
<label for=»lname»>Last name:</label>  <input type=»text» id=»lname»
name=»lname»><br><br>  <input type=»submit» value=»Submit»> 
<input type=»submit» formtarget=»_blank» value=»Submit to a new window/tab»>
</form>

All attributes of input

Attribute name Values Notes
step Specifies the interval between valid values in a number-based input.
required Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty.
readonly Disallows the user from editing the value of the input.
placeholder Specifies placeholder text in a text-based input.
pattern Specifies a regular expression against which to validate the value of the input.
multiple Allows the user to enter multiple values into a file upload or email input.
min Specifies a minimum value for number and date input fields.
max Specifies a maximum value for number and date input fields.
list Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.
height Specifies the height of an image input.
formtarget Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of «submit» or «image».
formmethod Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of «submit» or «image».
formenctype Specifies how form data should be submitted to the server. Only for use on input types «submit» and «image».
formaction Specifies the URL for form submission. Can only be used for type=»submit» and type=»image».
form Specifies a form to which the input field belongs.
autofocus Specifies that the input field should be in focus immediately upon page load.
accesskey Defines a keyboard shortcut for the element.
autocomplete Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields.
border Was used to specify a border on an input. Deprecated. Use CSS instead.
checked Specifies whether a checkbox or radio button form input should be checked by default.
disabled Disables the input field.
maxlength Specifies the maximum number of characters that can be entered in a text-type input.
language Was used to indicate the scripting language used for events triggered by the input.
name Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted.
size Specifies the width of the input in characters.
src Defines the source URL for an image input.
type buttoncheckboxfilehiddenimagepasswordradioresetsubmittext Defines the input type.
value Defines an initial value or default selection for an input field.

Числа в виде ползунка

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

Теперь вы также можете иметь ползунок в форме. Код выглядит странно похожим на поле счетчика.

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

Все доступные атрибуты такие же, как и у type=»number» — min, max, step, value — и означают то же самое. Единственное отличие состоит в пользовательском интерфейсе. Вместо поля для ввода, браузеры, как ожидается, отображают type=»range» в виде ползунка. На момент написания последние версии Safari, Chrome и Opera работали с этим. К сожалению, iPhone отображает в виде простого текстового поля, он даже не оптимизирует свою экранную клавиатуру для ввода чисел. Все остальные браузеры просто рассматривать поле как type=»text», поэтому нет никаких причин начать использовать этот тип немедленно.

Выбор даты

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>

Окно поиска

Итак, поиск. Не только поиск от 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;
}

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

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

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

Adblock
detector