Форма заполнения телефона html

Значение tel

Тип tel (от англ. » tel ephone» ‒ «телефон») создаёт поле ввода телефонного номера.

Внешний вид

• ‒ телефонное поле;
• ‒ наведение курсора;
• ‒ фокус.

Примечание

HTML спецификация не устанавливает определённый синтаксис телефонного номера для данного поля (в отличие от « url » и « email » полей). Это сделано намеренно, так как на практике, поля телефонных номеров, как правило, имеют свободную форму, потому что существует большое разнообразие допустимых телефонных номеров. (Установить необходимый синтаксис телефонного номера можно с помощью атрибута « pattern ».)

Поддержка браузерами

Спецификация

Верс.	Раздел
HTML
2.0	Input Field: INPUT
3.2	INPUT text fields, radio buttons, check boxes, .
4.01	17.4.1 Control types created with INPUT
5.0	4.10.5.1.3 Telephone state (type=tel)
5.1	4.10.5.1.3. Telephone state (type=tel)
XHTML
1.0	Extensible HyperText Markup Language
1.1	Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete Автозаполнение значения поля телефона. autofocus Автоматческая фокусировка на телефонном поле после полной загрузки страницы. disabled Блокировка поля телефона.

disabled=»disabled»

form Присоединение телефонного поле к форме. list Создание списка рекомендованных вариантов телефонных номеров.

maxlength Задаёт максимально-допустимое количество вводимых символов. minlength Задаёт минимально-допустимое количество вводимых символов. name Присваивает имя телефонному полю. pattern Устанавливает критерий/шаблон ввода. placeholder Указывает текст-подсказку для пустого поля.

placeholder=»Текст-подсказка»

readonly Указывает, что поле телефона доступно только для чтения (изменение/редактирование запрещено). required Указывает, что поле телефона обязательно для заполнения. size Задаёт ширину телефонного поля по количеству вводимых символов.

size=»10″

value Указывает значение телефонного поля (отправляется на сервер или используется скриптами).

Примечание: Данный атрибут должен иметь значение, которое не содержит символов «LF» ПЕРЕВОД СТРОКИ [ U+000A ] или «CR» ВОЗВРАТ КАРЕТКИ [ U+000D ].

value=»+7 (900) 123-45-67″

Источник

HTML input type=”tel” | Explained

Web developers utilize the HTML “input” element with the type “tel” to create the input field for telephone numbers. This type of input field can be utilized by the users for submitting a phone number. Moreover, creating an input field for specifically entering the phone number can make your web page look professional and different from the competitors.

This article will explain the HTML input type=“tel” element.

How to Create an HTML input type=“tel” Element?

To create an HTML input type tel, follow the given steps.

Step 1: Create Input Field for Phone Number

In the HTML file, first, create a div element with the name “main”. Inside this div element, add and elements. Within the label element, first, mention the caption and then add an input tag associated with type and name attributes. After that, include a tag with the caption “Submit”:

Save the file and open it in your browser. At this moment, the web page will look like this:

Step 2: Apply Styles to Input field

Let’s apply styles to the input type tel with CSS properties.

Style “main” div

.main {
background-color: rgba ( 0 , 0 , 0 , 0.159 ) ;
max-width: 600px;
margin: 15px auto;
height: 200px;
border-radius: 30px;
}

The “.main” is utilized to access the div element with class main, and the properties that are applied to it are described below:

• “background-color” property is utilized for the setting of the element’s background color.
• “max-width” property is utilized for the setting of the element’s maximum width.
• “margin” property with the value “15px” represents the space of 15px at the top-bottom, and the “auto” generates the equal space on the left-right side of the element.
• “height” property is utilized to set the element’s height to 200px.
• “border-radius” property is utilized for the setting of the element’s width to 30px.

Style “form-main” div

.form-main {
display: flex ;
justify-content: center;
align-items: center;
height: 100 % ;
font-size: 24px;
}

The “.form-main” is utilized to access the div element with the class form-main. The description of the properties applied is mentioned below:

• “display” property with the value set as the “flex” will create a flexible layout for the elements.
• “justify-content” property is utilized to align the flexible items horizontally.
• “align-items” property is utilized to align the flexible items vertically.
• “height” property is utilized for the setting of the element’s height.
• “font-size” property is utilized for the setting of the element’s font size.

Style “input” of form-main div

.form-main input {
border: 1px solid rgb ( 47 , 63 , 63 ) ;
padding: 10px;
font-size: 22px;
background-color: rgb ( 85 , 104 , 104 ) ;
color: #ffffff;
outline: none;
}

The form-main class is applied with CSS properties that are explained below:

• “border” property is applied with the value “1px solid rgb(47, 63, 63)”, where 1px represents the width of the border, solid line type, and rgb(47, 63, 63) represents the color.
• “padding” property is assigned with the value “10px”, where the first 10px represents the space on the top and bottom of the content, and the second refers to the 10px space on the left and right side of the element’s content.
• “font-size” property is utilized to set the font size.
• “background-color” property is utilized for the setting of the element’s background color.
• “color” property is utilized to set the font color.
• “outline” property with the value none will remove the outline of the input field when selected.

Style “placeholder” of input

We have only applied color to the input placeholder.

Style the “button” of the form-main

.form-main button {
border: 1px solid rgb ( 47 , 63 , 63 ) ;
padding: 10px 20px;
font-size: 22px;
background-color: rgb ( 12 , 33 , 33 ) ;
color: #a3a3a3;
cursor: pointer;
margin-left: 5px;
transition: all 0.3s ease;
}

Here is the description of the given properties:

• “border” property is applied with the value “1px solid rgb(47, 63, 63)”, where 1px represents the width of the border, solid line type, and rgb(47, 63, 63) represents the color.
• “padding” property is assigned with the value “10px”, where 10px represents the space on the top and bottom of the content and 10px space on the left and right side of the content.
• “font-size” property is utilized to set the font size.
• “background-color” property is utilized for the setting of the element’s background color.
• “color” property is utilized to set the font color.
• “cursor” with the value set as the “pointer” will change the cursor to a pointing hand when placed on the button.
• “margin-left” property will set a space of 5px to the element’s left.
• “transition” property with the value set as all 0.3s ease allows the element to be moved gradually.

Style the “button” on the hover

By providing the above-mentioned code, the output screen will generate the result as shown below:

Step 3: Add “required” Attribute to Input Field

It is often mandatory to add a specified pattern of the telephone number in our forms, which can be validated before form submission.

To do so, the “required” attribute is utilized in such a way that if a user submits an empty input field, a message will be generated to fill the field as follows:

It can be seen from the below image that entering the value in the input field is mandatory:

Step 4: Add “pattern” Attribute to Input Field

As we know, there is no validation procedure for telephone numbers as they vary from place to place. The pattern attribute is utilized for the specification of the telephone number’s format. As a result, the user can only add a telephone number according to the pattern:

Let’s provide a wrong pattern and see what happens:

It can be observed that the input field notifies the user to enter a number that should match the pattern.

So, let’s enter a telephone number with the correct pattern, click on the “Submit” button and see what happens:

Cool! We have successfully learned how to use an input element of type tel.

Conclusion

To make a phone number field, the HTML input type tel can be utilized. This type can have several attributes to add additional functionalities such as placeholder, pattern, required, and more. More specifically, the pattern attribute is used for setting the pattern for the phone number, and the required attributes restrict the user to submit a non-empty value. This article has demonstrated the HTML input type tel and its attributes with examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник