DevOps:Doc/FlexForm/2.0/input/tel - Revision history

Fd4138e7-8b46-4c8f-99bf-d4b738ebc295: Text replacement - "|Subject version=2.0,2.1" to "|Subject version=2.0,2.1,2.5"

2025-08-21T09:06:57Z

Text replacement - "|Subject version=2.0,2.1" to "|Subject version=2.0,2.1,2.5"

ws-class-props
← Older revision		Revision as of 11:06, 21 August 2025
Line 1:		Line 1:
	{{Csp class properties		{{Csp class properties
	\|Subject version=2.0,2.1		\|Subject version=2.0,2.1,2.5
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
	\|Doc parent=DevOps:Doc/FlexForm/1.0/input		\|Doc parent=DevOps:Doc/FlexForm/1.0/input

Maintenance script: Imported by PageSync

2025-07-15T08:34:33Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:34, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Subject version=2.0,2.1		\|Subject version=2.0,2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm

Charlot: User:Charlot

2023-03-31T20:10:12Z

User:Charlot

ws-class-props
← Older revision		Revision as of 22:10, 31 March 2023
Line 1:		Line 1:
	{{Doc properties		{{Doc properties
	\|Subject version=2.0		\|Subject version=2.0,2.1
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
	\|Doc parent=DevOps:Doc/FlexForm/1.0/input		\|Doc parent=DevOps:Doc/FlexForm/1.0/input

Charlot: User:Charlot

2023-01-03T09:31:38Z

User:Charlot

ws-class-props
← Older revision		Revision as of 11:31, 3 January 2023
Line 5:		Line 5:
	\|Doc sort order=110		\|Doc sort order=110
	\|Doc target group=User		\|Doc target group=User
			\|Doc synopsis=How to render a telephone number input field
	}}		}}

Charlot at 09:30, 3 January 2023

2023-01-03T09:30:27Z

← Older revision		Revision as of 11:30, 3 January 2023
Line 10:		Line 10:
	===Parameters===		===Parameters===
	input type="tel"		input type="tel"

	~~As of version 1.1.37 there is an optional field you can use called '''calc'''. It allows you to do calculations with other input field of type="number".~~
	~~The calc argument can hold a calculation and the other fields you want to use access them by there name field between square brackets. Like so : "5*[field1]+(20/[field2]".~~
	~~See the second example. Currently for this to work, the number field with the calc argument must be in the same Form.~~

	===Example===		===Example===

Charlot at 09:29, 3 January 2023

2023-01-03T09:29:58Z

← Older revision		Revision as of 11:29, 3 January 2023
Line 6:		Line 6:
	How to render a telephone number input field		How to render a telephone number input field
	===Description===		===Description===
	<code><nowiki><input></nowiki></code> elements of type tel are used to let the user enter and edit a telephone number. Unlike <code><nowiki><<input type="email"></nowiki></code> and <code><nowiki><<input type="url"></nowiki></code>, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.		<code><nowiki><input></nowiki></code> elements of type tel are used to let the user enter and edit a telephone number. Unlike <code><nowiki><input type="email"></nowiki></code> and <code><nowiki><input type="url"></nowiki></code>, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.

	===Parameters===		===Parameters===

Charlot at 09:29, 3 January 2023

2023-01-03T09:29:39Z

← Older revision		Revision as of 11:29, 3 January 2023
Line 1:		Line 1:
	==Name==		===Name===
	tel		tel
			===Type===
			input
			===Synopsis===
			How to render a telephone number input field
			===Description===
			<code><nowiki><input></nowiki></code> elements of type tel are used to let the user enter and edit a telephone number. Unlike <code><nowiki><<input type="email"></nowiki></code> and <code><nowiki><<input type="url"></nowiki></code>, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.

	==~~Description~~==		===Parameters===
	~~Input~~ type ~~for telephone numbers.~~		input type="tel"

	==Example==		As of version 1.1.37 there is an optional field you can use called '''calc'''. It allows you to do calculations with other input field of type="number".
			The calc argument can hold a calculation and the other fields you want to use access them by there name field between square brackets. Like so : "5*[field1]+(20/[field2]".
			See the second example. Currently for this to work, the number field with the calc argument must be in the same Form.

			===Example===
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<~~_form~~ action="get" restrictions="lifted">		<form action="get" restrictions="lifted">
	<~~_label~~ for="call-me">Enter your phone number (Dutch format: +31 123456789 )</~~_label~~>		<label for="call-me">Enter your phone number (Dutch format: +31 123456789 )</label>
	<br>		<br>
	<~~_input~~ type="tel" id="call-me" name="phone" pattern="(^\+[0-9]{2}\|^\+[0-9]{2}$0$\|^$\+[0-9]{2}$$0$\|^00[0-9]{2}\|^0)([0-9]{9}$\|[0-9\-\s]{10}$)" value="+31 123456789" />		<input type="tel" id="call-me" name="phone" pattern="(^\+[0-9]{2}\|^\+[0-9]{2}$0$\|^$\+[0-9]{2}$$0$\|^00[0-9]{2}\|^0)([0-9]{9}$\|[0-9\-\s]{10}$)" value="+31 123456789" />
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>

	<~~_form~~ action="get" restrictions="lifted">		<form action="get" restrictions="lifted">
	<~~_label~~ for="call-me">Enter your phone number (Dutch format: +31 123456789 )</~~_label~~>		<label for="call-me">Enter your phone number (Dutch format: +31 123456789 )</label>
	<br>		<br>
	<~~_input~~ type="tel" id="call-me" name="phone" pattern="(^\+[0-9]{2}\|^\+[0-9]{2}$0$\|^$\+[0-9]{2}$$0$\|^00[0-9]{2}\|^0)([0-9]{9}$\|[0-9\-\s]{10}$)" value="+31 123456789" />		<input type="tel" id="call-me" name="phone" pattern="(^\+[0-9]{2}\|^\+[0-9]{2}$0$\|^$\+[0-9]{2}$$0$\|^00[0-9]{2}\|^0)([0-9]{9}$\|[0-9\-\s]{10}$)" value="+31 123456789" />
	</~~_form~~>		</form>
			===Note===

			===Links===
			https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

Charlot: User:Charlot

2023-01-03T09:26:38Z

User:Charlot

New page

==Name==
tel

==Description==
Input type for telephone numbers.

==Example==
<syntaxhighlight lang="html">
<_form action="get" restrictions="lifted">
<_label for="call-me">Enter your phone number (Dutch format: +31 123456789 )</_label>
<br>
<_input type="tel" id="call-me" name="phone" pattern="(^\+[0-9]{2}|^\+[0-9]{2}$0$|^$\+[0-9]{2}$$0$|^00[0-9]{2}|^0)([0-9]{9}$|[0-9\-\s]{10}$)" value="+31 123456789" />
</_form>
</syntaxhighlight>

<_form action="get" restrictions="lifted">
<_label for="call-me">Enter your phone number (Dutch format: +31 123456789 )</_label>
<br>
<_input type="tel" id="call-me" name="phone" pattern="(^\+[0-9]{2}|^\+[0-9]{2}$0$|^$\+[0-9]{2}$$0$|^00[0-9]{2}|^0)([0-9]{9}$|[0-9\-\s]{10}$)" value="+31 123456789" />
</_form>