Html формы

Содержание:

Поддержка в браузерах
HTML Справочник
HTML Теги
HTML тег
The height and width Attributes
- Example
Input Type Submit
- Example
- Example
Input Type Date
- Example
- Example
HTML Tutorial
JavaScript
Input Type Reset
- Example
Animated Inputs
- Example
- Example
- Example
Select Options
- Example
- Example
Form Elements in a Grid
- Example
Grid with Labels
- Example
HTML Теги
Реализация
Немного спорный пример с использованием
JavaScript
The step Attribute
- Example
Атрибуты
Значение атрибута type: range
Input Cards
Header
- Example
Colored Labels
- Example
- Example
Rounded Borders
- Example
Borderless Input
- Example
Input Form
- Example
Hoverable inputs
- Example
Animated Inputs
- Example
- Example
- Example
Select Options
- Example
- Example
Form Elements in a Grid
- Example
Grid with Labels
- Example
JavaScript
Значение атрибута type: tel
The min and max Attributes
- Example
Input Restrictions
- Example

Поддержка в браузерах

Хорошая новость — все современные браузеры поддерживают в некоторой степени элемент <output>. Плохая новость в том, что есть несколько подводных камней.

Поддержка в браузерах
Браузер	Поддержка
Chrome	13+
Safari	5.1+
Firefox	6+
Opera	9.20+
Internet Explorer	10+

Все примеры, которые мы видели до сих пор, должны безупречно работать в Opera 11.5 +, Safari 5.1+ и Chrome 13 +. IE, как и следовало ожидать, несколько отстаёт, <output> поддерживается в IE10 Platform Preview 2, а oninput поддерживается уже в IE9.
Чтобы обойти это в наших простых примерах, мы должны вернуться к надёжному и проверенному getElementById и parseFloat (пример 6).

Пример. 6. Использование getElementById для поддержки старых браузеров

Это всё не идеально, зато будет работать до тех пор, пока отстающие браузеры не умрут медленной и мучительной смертью.

Чтобы проверить поддержку в текущем браузере, откройте тестовую страницу Майка Тейлора.

HTML Справочник

Формы html код для сайта с отправкой примеры

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

Php парсинг html, с помощью simple html dom

<!—…—>
<!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 тег

Редактор html

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

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

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

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

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

The height and width Attributes

The input and attributes specify the height and width of an element.

Tip: Always specify both the height and width attributes for
images. If height and width are set, the space required for the image is
reserved when the page is loaded. Without these attributes, the browser does not
know the size of the image, and cannot reserve the appropriate space to it. The
effect will be that the page layout will change during loading (while the images
load).

Example

Define an image as the submit button, with height and width attributes:

<form> <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=»image» src=»img_submit.gif» alt=»Submit» width=»48″ height=»48″>
</form>

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

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

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

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Input Type Reset

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

Example

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.

Animated Inputs

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

Example

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

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

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 ❯

HTML Теги

<!—…—><!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>

Реализация

Начнём с создания простого примера, который складывает два целых числа (пример 1). Будем использовать новый в HTML5 тип number и функцию parseInt для преобразования строк в целое число.

Пример 1. Простой калькулятор в Chrome

Заметьте, что мы используем стандартное событие oninput, которое заменило устаревшие событие onforminput. Даниэль Фризен написал подробную статью о текущей поддержке oninput; oninput не поддерживается в IE8 и ниже, а его поддержка в IE9 несколько странная, но вы можете обойти эти проблемы с помощью html5Widgets.

Как и следовало ожидать, если ввести только одно значение, функция возвращает NaN. Она пытается сложить число и значение undefined, в итоге 1 + undefined = undefined.

Немного спорный пример с использованием

В HTML5 также введён тип поля формы range, который в поддерживаемых браузеах отображается как ползунок. С помощью этого типа пользователь может ввести примерное значение в заданном диапазоне без необходимости быть совершенно точным или непосредственно вводить числовое значение. Для кроссбраузерности смотрите статью Реми Шарпа.

Пока писалась эта статья я нашёл ряд примеров использования элемента <output> в сочетании с <input type=»range»>, как показано в примере 5.

Пример. 5. Использование <input type=»range»> с элементом <output>

Использование <output> для показа текущего значения пользователю кажется мне вполне разумным применением, но это не результат вычислений как описано в спецификации. Несколько человек на канале IRC согласились со мной, поэтому я подал отчёт об ошибке, где просил внести поправки в определение. С момента написания этой статьи ошибка была решена и определение расширили, так что использование <output>, как показано выше, теперь корректно. Ура!

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

The step Attribute

The input attribute specifies the legal number intervals for an
input field.

Example: if step=»3″, legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to create a range of legal values.

The attribute works with the following input types: number, range, date, datetime-local, month, time and week.

Example

An input field with a specified legal number intervals:

<form> <label for=»points»>Points:</label> <input
type=»number» id=»points» name=»points» step=»3″></form>

Note: Input restrictions are not foolproof, and JavaScript provides many ways to
add illegal input. To safely restrict input, it must also be checked by the receiver
(the server)!

Атрибуты

Атрибут	Значение	Описание
accept	file_extension audio/* video/* image/*media_type	Задает фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне ввода файла (только для type=»file»)
alt	text	Задает альтернативный текст для изображений (только для type=»image»)
autocomplete	on off	Указывает, должен ли элемент <input> иметь функцию автозаполнения
autofocus	autofocus	Указывает, что элемент <input> должен автоматически получать Фокус при загрузке страницы
checked	checked	Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio»)
dirname	inputname.dir	Указывает, что текстовое направление будет отправлено
disabled	disabled	Указывает, что элемент <input> должен быть отключен
form	form_id	Указывает форму, к которой принадлежит элемент <input>
formaction	URL	Указывает URL файла, который будет обрабатывать входной элемент управления при отправке формы (для type=»submit» и type=»image»)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Указывает, как данные формы должны быть закодированы при отправке их на сервер (для type=»submit» и type=»image»)
formmethod	getpost	Определяет метод HTTP для отправки данных на URL действия (для type=»submit» и type=»image»)
formnovalidate	formnovalidate	Определяет, что элементы формы не должны проверяться при отправке
formtarget	_blank _self _parent _topframename	Указывает, где будет отображаться ответ, полученный после отправки формы (для type=»submit» и type=»image»)
height	pixels	Задает высоту элемента <input> (только для type=»image»)
list	datalist_id	Относится к элементу <datalist>, содержащий предварительно определенные параметры для элемента <input>
max	number date	Задает максимальное значение для элемента <input>
maxlength	number	Задает максимальное количество символов, разрешенных в элементе <input>
min	number date	Задает минимальное значение для элемента <input>
minlength	number	Задает минимальное количество символов, требуемых в элементе <input>
multiple	multiple	Указывает, что пользователь может ввести более одного значения в элемент <input>
name	text	Задает имя элемента <input>
pattern	regexp	Указывает регулярное выражение, по которому проверяется значение элемента <input>
placeholder	text	Задает короткую подсказку, описывающую ожидаемое значение элемента <input>
readonly	readonly	Указывает, что поле ввода доступно только для чтения
required	required	Указывает, что перед отправкой формы необходимо заполнить поле ввода
size	number	Задает ширину элемента <input> в символах
src	URL	Указывает URL изображения, которое будет использоваться в качестве кнопки отправки (только для type=»image»)
step	numberany	Задает интервал между юридическими числами в поле ввода
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Указывает тип элемента <input> для отображения
value	text	Задает значение элемента <input>
width	pixels	Задает ширину элемента <input> (только для type=»image»)

Значение атрибута type: range

Поле ввода типа range элемента <input> позволит создать такой элемент интерфейса, как ползунковый регулятор. Ползунок предназначен только для выбора числовых значений в некоем диапазоне, при этом для пользователя не все браузеры отображают текущее числовое значение. Основной синтаксис создания ползунка:

Нижняя и верхняя границы диапазона min и max ограничивают значения, которые могут храниться в поле формы. Диапазон по умолчанию — от 0 до 100. Атрибут step позволяет разработчикам указывать шаг изменения чисел (по умолчанию 1). Текущее значение задается в атрибуте value. По умолчанию value = (max + min)/2. Вышеперечисленные атрибуты не являются обязательными и, если их опустить, то в таком случае они принимают значения по умолчанию.

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

Rounded Borders

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

Example

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

Animated Inputs

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

Example

Example

Select Options

Example

Form Elements in a Grid

Example

Grid with Labels

Example

❮ Previous
Next ❯

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

Значение атрибута type: tel

Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:

Результат
HTML-код
Попробуй сам » /

Телефон:

Значение
Описание

button
Создает кнопку с произвольным действием, действие по умолчанию не определено:

checkbox
Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:Я знаю HTML

color

Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:

date

Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:

datetime-local

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

Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:

file
Позволяет загружать файлы с компьютера пользователя:
Выберите файл:

hidden
Создает скрытый элемент, не отображаемый пользователю. Информация,
хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.

image
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:

month

Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:

number

Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):

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

radio
Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:

range

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

reset
Создает кнопку, которая очищает поля формы от введенных пользователем данных:

Создает поле поиска, по умолчанию поле ввода имеет прямоугольную форму:
Поиск:

submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:

text
Создает однострочное поле ввода текста:

time

Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:

url

Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:

week

Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

The min and max Attributes

The input and attributes specify the minimum and maximum values for an
input field.

The and attributes work with the following input types: number, range, date, datetime-local, month, time and week.

Tip: Use the max and min attributes together to create a
range of legal values.

Example

Set a max date, a min date, and a range of legal values:

<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″><br><br> <label for=»quantity»>Quantity
(between 1 and 5):</label> <input type=»number» id=»quantity»
name=»quantity» min=»1″ max=»5″></form>

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>