Элемент
Содержание:
- Окно поиска
- HTML Tutorial
- Выбор даты
- All attributes of input
- HTML тег
- HTML Tutorial
- Attributes
- Примеры получения/ввода данных из консоли/клавиатуры.
- Input Type Date
- The formenctype Attribute
- Input Type Hidden
- Обработка исключений ввода
- HTML Tags
- The formmethod Attribute
- The formaction Attribute
- Числа как счетчики
- The formtarget Attribute
Окно поиска
Итак, поиск. Не только поиск от 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;
}
Спасибо Джону Лейну за обучение меня этому трюку.
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
Выбор даты
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>
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. |
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
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 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») |
Примеры получения/ввода данных из консоли/клавиатуры.
- ;
- ;
- .
Общие примеры использования функции .
>>> 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'
------------------------------------------------------------
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>
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>
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>
Обработка исключений ввода
Есть несколько способов, как можно удостовериться в том, что пользователь ввел корректные данные. Один из них — перехватывать все возможные ошибки, которые могут возникнуть.
Вот такой код считается небезопасным:
Запустим его и введем следующее:
При вызове функции со строкой появится исключение , и программа остановит работу.
Вот как можно сделать код безопаснее и обработать ввод:
Этот блок оценит ввод. Если он является целым числом, представленным в виде строки, то функция конвертирует его в целое число. Если нет, то программа выдаст исключение, но вместо ошибки оно будет перехвачено. В результате вызовется вторая инструкция .
Вот так будет выглядеть вывод с исключением.
Такой код можно объединить с другой конструкцией, например, циклом for, чтобы убедиться, что код будет выполняться постоянно, до тех пор, пока пользователь не введет те данные, которые требуются.
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>
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>
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>
Числа как счетчики
Следующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -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-фреймворк
}
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>
