Html form - Revision history

Unknown user: Text replacement - "Category:WebDesign" to "Category:Design"

2022-05-16T02:30:47Z

Text replacement - "Category:WebDesign" to "Category:Design"

← Older revision		Revision as of 10:30, 16 May 2022
Line 40:		Line 40:
	Disable the button to prevent multiple form submits e.g. [https://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit javascript - Disable submit button on form submit - Stack Overflow]		Disable the button to prevent multiple form submits e.g. [https://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit javascript - Disable submit button on form submit - Stack Overflow]

	[[Category:~~WebDesign~~]]		[[Category:Design]]

Planetoid at 06:15, 15 November 2018

2018-11-15T06:15:19Z

← Older revision		Revision as of 14:15, 15 November 2018
Line 37:		Line 37:
	* Press {{kbd \| key=Alt}} +{{kbd \| key= D}} will switch to Url address on {{Chrome}}.		* Press {{kbd \| key=Alt}} +{{kbd \| key= D}} will switch to Url address on {{Chrome}}.

			== Form submit ==
			Disable the button to prevent multiple form submits e.g. [https://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit javascript - Disable submit button on form submit - Stack Overflow]

	[[Category:WebDesign]]		[[Category:WebDesign]]

Planetoid at 07:40, 7 November 2016

2016-11-07T07:40:11Z

← Older revision		Revision as of 15:40, 7 November 2016
Line 1:		Line 1:
	<< [[Accessibility]]		<< [[Accessibility]]

			== Tab index ==
	If the <span class="code">submit/reset</span> buttons were replace with the <span class="code">div/a</span> blocks.		If the <span class="code">submit/reset</span> buttons were replace with the <span class="code">div/a</span> blocks.

Line 31:		Line 32:
	* [http://htmldog.com/guides/html/advanced/forms/ Accessible Forms \| HTML Dog]		* [http://htmldog.com/guides/html/advanced/forms/ Accessible Forms \| HTML Dog]

			== Accesskey ==

			[http://www.w3schools.com/tags/att_global_accesskey.asp HTML Global accesskey Attribute]. Avoid to conflict with the browser keyboard shortcut e.g. [https://support.google.com/chrome/answer/157179?hl=en Chrome keyboard shortcuts].
			* Press {{kbd \| key=Alt}} +{{kbd \| key= D}} will switch to Url address on {{Chrome}}.


	[[Category:WebDesign]]		[[Category:WebDesign]]

Planetoid at 08:16, 13 October 2014

2014-10-13T08:16:49Z

← Older revision		Revision as of 16:16, 13 October 2014
Line 1:		Line 1:
	<< [[Accessibility]]		<< [[Accessibility]]

	If the ~~{{kbd \| key~~=submit/reset}} buttons were replace with the ~~{{kbd \| key~~=a/~~div}}~~ blocks.		If the <span class="code">submit/reset</span> buttons were replace with the <span class="code">div/a</span> blocks.

	Before:		Before:
Line 25:		Line 25:
	* [http://jquery-howto.blogspot.tw/2013/08/jquery-form-reset.html jQuery Howto: jQuery Form Reset]		* [http://jquery-howto.blogspot.tw/2013/08/jquery-form-reset.html jQuery Howto: jQuery Form Reset]
	* [http://api.jquery.com/submit/ .submit() \| jQuery API Documentation]		* [http://api.jquery.com/submit/ .submit() \| jQuery API Documentation]
	* [http://api.jquery.com/keypress/ .keypress() \| jQuery API Documentation] {{exclaim}} <span class="code" style="font-family: source-code-pro, Consolas, monospace !important; word-spacing: 0; padding: 0 3px; background-color: rgba( 0, 0, 0, .1 ); border-radius: 3px;">keypress</span> event works on div element but not a element.		* [http://api.jquery.com/keypress/ .keypress() \| jQuery API Documentation] {{exclaim}} <span class="code" style="font-family: source-code-pro, Consolas, monospace !important; word-spacing: 0; padding: 0 3px; background-color: rgba( 0, 0, 0, .1 ); border-radius: 3px;">keypress</span> event works on <span class="code">div</span> element but not <span class="code">a</span> element.

	further reading:		further reading:

Planetoid at 08:15, 13 October 2014

2014-10-13T08:15:17Z

← Older revision		Revision as of 16:15, 13 October 2014
Line 22:		Line 22:
	* press {{kbd \| key=enter}} key to submit the form in any input box.		* press {{kbd \| key=enter}} key to submit the form in any input box.

	~~further reading~~:		used functions:
	* [http://www.w3schools.com/tags/att_global_tabindex.asp HTML Global tabindex Attribute]
	* [http://jquery-howto.blogspot.tw/2013/08/jquery-form-reset.html jQuery Howto: jQuery Form Reset]		* [http://jquery-howto.blogspot.tw/2013/08/jquery-form-reset.html jQuery Howto: jQuery Form Reset]
	* [http://api.jquery.com/submit/ .submit() \| jQuery API Documentation]		* [http://api.jquery.com/submit/ .submit() \| jQuery API Documentation]
	* [http://api.jquery.com/keypress/ .keypress() \| jQuery API Documentation] {{exclaim}} <span class="code" style="font-family: source-code-pro, Consolas, monospace !important; word-spacing: 0; padding: 0 3px; background-color: rgba( 0, 0, 0, .1 ); border-radius: 3px;">keypress</span> event works on div element but not a element.		* [http://api.jquery.com/keypress/ .keypress() \| jQuery API Documentation] {{exclaim}} <span class="code" style="font-family: source-code-pro, Consolas, monospace !important; word-spacing: 0; padding: 0 3px; background-color: rgba( 0, 0, 0, .1 ); border-radius: 3px;">keypress</span> event works on div element but not a element.

			further reading:
			* [http://www.w3schools.com/tags/att_global_tabindex.asp HTML Global tabindex Attribute]
			* [http://htmldog.com/guides/html/advanced/forms/ Accessible Forms \| HTML Dog]

Planetoid: Created page with "<< Accessibility If the {{kbd | key=submit/reset}} buttons were replace with the {{kbd | key=a/div}} blocks. Before:

  
 
2014-10-13T08:03:21Z
Created page with "<< Accessibility  If the {{kbd | key=submit/reset}} buttons were replace with the {{kbd | key=a/div}} blocks.  Before: <pre> <input type='text' name='text1'> <br /> <input..."
New page
<< [[Accessibility]]



If the {{kbd | key=submit/reset}} buttons were replace with the {{kbd | key=a/div}} blocks.



Before:

<pre>

<input type='text' name='text1'> <br />

<input type='reset' value='Reset' name='reset'>

<input type="submit" value="Submit"> 

</pre>



After:

<pre>

<input type='text' name='text1' tabindex="1"> <br />

<div id="clear_my_form" tabindex="2"><a href="#">reset</a></div>

<div id="submit_my_form" tabindex="3"><a href="#">submit</a></div>

</pre>



takes the Accessibility issues into consideration:

* tabindex: Users are able to press {{kbd | key=tab}} key to jump to next form element.

* press {{kbd | key=space}} key or {{kbd | key=enter}} key to trigger the reset or submit the form.

* press {{kbd | key=enter}} key to submit the form in any input box.



further reading:

* [http://www.w3schools.com/tags/att_global_tabindex.asp HTML Global tabindex Attribute]

* [http://jquery-howto.blogspot.tw/2013/08/jquery-form-reset.html jQuery Howto: jQuery Form Reset]

* [http://api.jquery.com/submit/ .submit() | jQuery API Documentation]

* [http://api.jquery.com/keypress/ .keypress() | jQuery API Documentation] {{exclaim}} <span class="code" style="font-family: source-code-pro, Consolas, monospace !important; word-spacing: 0; padding: 0 3px; background-color: rgba( 0, 0, 0, .1 ); border-radius: 3px;">keypress</span> event works on div element but not a element.









[[Category:WebDesign]]