Html5 adds some new form attributes. This article will show you some examples of how to use the Html5 new from attributes.
1. Html5 Form Attributes Introduction.
- The form attribute: You can use the form attribute to specify which Html form this Html element belongs to. This way you can add the Html element outside of the Html form tag. Below is an example.
<form id="form1" onsubmit="javascript:return submit_form1(this)"> UserName:<input type="text" id="username_text" formaction="/action1.jsp" autofocus formmethod="get" placeholder="Input username here." /><br/><br/> Password:<input type="password" id="password_text" formaction="/action2.jsp" formmethod="post" placeholder="Input password here." /><br/><br/> </form> Email:<input type="email" id="email_text" form="form1" formaction="/action3.jsp" formmethod="post" placeholder="Input email here." list="email_list" autocomplete="off" />
- The formaction attribute: You can set the formaction attribute to an Html element, then this Html element will be submitted to the specified action URL like the above example.
- The formmethod attribute: You can set the formmethod attribute to each of the Html elements like the above example, then the Html elements will be submitted with a different form method.
- The placeholder attribute: The placeholder attribute can be used to place a hint text in the Html elements. When you input the text in the Html element ( input text box ), then the placeholder text will disappear.
- The autofocus attribute: This attribute can be used to specify which Html element will get the focus automatically when you open the web page in a web browser. Below is the example.
UserName:<input type="text" id="username_text" formaction="/action1.jsp" autofocus formmethod="get" placeholder="Input username here." /><br/><br/>
- The list attribute: You can add the list attribute to an input text box, and then create a datalist element and assign it to the input text box’s list attribute value, then when you input text in the input textbox, it will popup the text list automatically for you to choose.
Email:<input type="text" id="email_text" form="form1" formaction="/action3.jsp" formmethod="post" placeholder="Input email here." list="email_list" autocomplete="off" /> <!-- define the text data list, set style="display:none;" to hide it. --> <datalist style="display:none;" id="email_list"> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> </datalist><br/><br/>
2. Html5 Form Input Types Introduction.
- Besides form attributes, Html5 also adds some new input types, it will be listed below.
- The new form input types contain email, search, url, date, time, datetime, datetime-local, month, week, number, range, tel, color.
3. Html5 Form Attributes & Input Types Examples.
- The example demo video URL is https://youtu.be/dHYmxO5zaK0.
- The Html5 form attributes example file name is html5-new-form-attributes-examples.html.
- Below is the example Html file source code.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Html5 New Form Attributes & Input Types Example</title> </head> <script language="javascript"> function submit_form1(src_object){ //alert('submit_form1') //formElements = document.getElementById('form1').elements; message = 'The form (id=' + src_object.id + ') contains the below elements.\r\n\r\n'; formElements = src_object.elements; length = formElements.length; for (let i = 0; i < length; i++) { element = formElements[i]; msg = 'id: ' + element.id; msg += ', value: ' + element.value; msg += ', formaction: ' + element.formAction; msg += ', formmethod: ' + element.formMethod; message += msg + ',\r\n\r\n'; } alert(message); return false; } </script> <body> <form id="form1" onsubmit="javascript:return submit_form1(this)"> UserName:<input type="text" id="username_text" formaction="/action1.jsp" autofocus formmethod="get" placeholder="Input username here." /><br/><br/> Password:<input type="password" id="password_text" formaction="/action2.jsp" formmethod="post" placeholder="Input password here." /><br/><br/> </form> Email:<input type="email" id="email_text" form="form1" formaction="/action3.jsp" autocomplete="off" formmethod="post" placeholder="Input email here." list="email_list" /> <datalist style="display:none;" id="email_list"> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> </datalist><br/><br/> Search: <input type="search" id="search_text" form="form1" formaction="/search.jsp" autocomplete="on" formmethod="post" placeholder="Input the search keyword here." list="search_keyword_list" /> <datalist style="display:none" id="search_keyword_list"> <option value="java">java</option> <option value="javascript">javascript</option> <option value="python">python</option> <option value="pygame">pygme</option> <option value="pyjs">pyjs</option> </datalist><br/><br/> URL: <input type="url" id="url_text" value="https://www.google.com" form="form1" formaction="/url.jsp" formmethod="post" placeholder="Input a valid URL." /><br/><br/> Date: <input type="date" id="date_text" value="2022-03-06" form="form1" formaction="/date.jsp" formmethod="post" placeholder="Select a valid date." /><br/><br/> Time: <input type="time" id="time_text" value="11:16" form="form1" formaction="/time.jsp" formmethod="post" placeholder="Select a valid time." /><br/><br/> DateTime: <input type="datetime" id="datetime_text" form="form1" formaction="/datetime.jsp" formmethod="post" placeholder="Select a valid datetime." /><br/><br/> DateTime-Local: <input type="datetime-local" id="datetime-local_text" value="" form="form1" formaction="/datetime-local.jsp" formmethod="post" placeholder="Select a valid datetime-local." /><br/><br/> Month: <input type="month" id="month_text" value="" form="form1" formaction="/month.jsp" formmethod="post" placeholder="Select a valid month."/><br/><br/> Week: <input type="week" id="week_text" value="2022-W01" form="form1" formaction="/week.jsp" formmethod="post" placeholder="Select a valid week."/><br/><br/> Number: <input type="number" id="number_text" value="50" min="1" max="100" step="10" form="form1" formaction="/number.jsp" formmethod="post" placeholder="Input a valid number." style="width:100px" /><br/><br/> Range Number: <input type="range" name="range_text" id="range_text" value="50" min="1" max="100" step="10" form="form1" formaction="/range.jsp" formmethod="post" /><br/><br/> Telephone Number: <input type="tel" id="telephone_number_text" form="form1" formaction="/telephone-number.jsp" formmethod="post" placeholder="Input a valid telephone number." /><br/><br/> Color: <input type="color" id="color_text" form="form1" formaction="/color.jsp" formmethod="post" /><br/><br/> <input type="submit" id="submit_button" form="form1" value="Submit Button"/> </body> </html>
