DevOps:Doc/FlexForm/2.0/label - 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:07:37Z

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:07, 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 synopsis=How to render a Label field		\|Doc synopsis=How to render a Label field

Maintenance script: Imported by PageSync

2025-07-15T08:34:49Z

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:13:07Z

User:Charlot

ws-class-props
← Older revision		Revision as of 22:13, 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 synopsis=How to render a Label field		\|Doc synopsis=How to render a Label field

Charlot at 14:08, 4 January 2023

2023-01-04T14:08:37Z

← Older revision		Revision as of 16:08, 4 January 2023
Line 8:		Line 8:
	The Label element represents a caption for an item.		The Label element represents a caption for an item.

	Associating a <~~source~~><nowiki><label></nowiki></~~source~~> with a form control, such as <~~source~~><nowiki><input></nowiki></~~source~~> or <~~source~~><nowiki><textarea></nowiki></~~source~~> offers some major advantages:		Associating a <code><nowiki><label></nowiki></code> with a form control, such as <code><nowiki><input></nowiki></code> or <code><nowiki><textarea></nowiki></code> offers some major advantages:

	* The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.		* The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
	* When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.		* When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

	To explicitly associate a <~~source~~><nowiki><label></nowiki></~~source~~> element with an <~~source~~><nowiki><input></nowiki></~~source~~> element, you first need to add the '''id''' attribute to the <~~source~~><nowiki><input></nowiki></~~source~~> element. Next, you add the '''for''' attribute to the <~~source~~><nowiki><label></nowiki></~~source~~> element, where the value of '''for''' is the same as the '''id''' in the <~~source~~><nowiki><input></nowiki></~~source~~> element.		To explicitly associate a <code><nowiki><label></nowiki></code> element with an <code><nowiki><input></nowiki></code> element, you first need to add the '''id''' attribute to the <code><nowiki><input></nowiki></code> element. Next, you add the '''for''' attribute to the <code><nowiki><label></nowiki></code> element, where the value of '''for''' is the same as the '''id''' in the <code><nowiki><input></nowiki></code> element.
	===Parameters===		===Parameters===
	label		label

Charlot at 14:06, 4 January 2023

2023-01-04T14:06:55Z

← Older revision		Revision as of 16:06, 4 January 2023
Line 8:		Line 8:
	The Label element represents a caption for an item.		The Label element represents a caption for an item.

	Associating a < label > with a form control, such as < input > or < textarea > offers some major advantages:		Associating a <source><nowiki><label></nowiki></source> with a form control, such as <source><nowiki><input></nowiki></source> or <source><nowiki><textarea></nowiki></source> offers some major advantages:

	* The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.		* The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
	* When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.		* When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

	To explicitly associate a < label > element with an < input > element, you first need to add the '''id''' attribute to the < input > element. Next, you add the '''for''' attribute to the < label > element, where the value of '''for''' is the same as the '''id''' in the < input > element.		To explicitly associate a <source><nowiki><label></nowiki></source> element with an <source><nowiki><input></nowiki></source> element, you first need to add the '''id''' attribute to the <source><nowiki><input></nowiki></source> element. Next, you add the '''for''' attribute to the <source><nowiki><label></nowiki></source> element, where the value of '''for''' is the same as the '''id''' in the <source><nowiki><input></nowiki></source> element.
	===Parameters===		===Parameters===
	label		label

Charlot at 14:04, 4 January 2023

2023-01-04T14:04:59Z

← Older revision	Revision as of 16:04, 4 January 2023
Line 1:	Line 1:
		===Name===
		label
		===Type===
		label
		===Synopsis===
		How to render a label element
		===Description===
		The Label element represents a caption for an item.

		Associating a < label > with a form control, such as < input > or < textarea > offers some major advantages:

		* The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
		* When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

		To explicitly associate a < label > element with an < input > element, you first need to add the '''id''' attribute to the < input > element. Next, you add the '''for''' attribute to the < label > element, where the value of '''for''' is the same as the '''id''' in the < input > element.
		===Parameters===
		label

		===Example===
		<syntaxhighlight lang="html">
		<form action="get">
		<div class="preference">
		<label for="cheese">Do you like cheese?</label>
		<input type="checkbox" name="cheese" id="cheese" />
		</div>

		<div class="preference">
		<label for="peas">Do you like peas?</label>
		<input type="checkbox" name="peas" id="peas" />
		</div>
		</form>
		</syntaxhighlight>
		<form action="get">
		<div class="preference">
		<label for="cheese">Do you like cheese?</label>
		<input type="checkbox" name="cheese" id="cheese" />
		</div>

		<div class="preference">
		<label for="peas">Do you like peas?</label>
		<input type="checkbox" name="peas" id="peas" />
		</div>
		</form>
		===Note===
		===Links===
		https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Charlot: User:Charlot

2023-01-04T13:48:53Z

User:Charlot

ws-class-props
← Older revision		Revision as of 15:48, 4 January 2023
Line 2:		Line 2:
	\|Subject version=2.0		\|Subject version=2.0
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
			\|Doc synopsis=How to render a Label field
			\|Doc parent=
			\|Doc sort order=205
			\|Doc target group=User
	}}		}}

Charlot: User:Charlot

2023-01-04T13:48:12Z

User:Charlot

New page