1. Get the form
Get form elements
Use the Forms property in the Document object to get all the form collections for the current HTML page
Get table element elements with the Name property value of the form in the Document object
<body><form action= "#" > <input type= "Submit" ></form><form name= "Mylove" action= "#" > <input type= "Submit" ></form><script> Console.log (document.forms);// Gets the current HTML page for all table cell console.log (document.mylove);// Document form name-some new browsers are not supported </script></body>
Get form component elements
Gets the collection of form components with the Elements property of the Htmlformelement object
<body><form action= "#" > <input type= "text" name= "username" > <input type= "Submit" > </form><script> var form = document.forms[0]; Console.log (form.elements);</script></body>
2. Form operation
Selection of text content
Get the contents of all text boxes in a text box with the Select () method in the HtmlElement object and the Htmltextareaelement object
<body><form action= "#" > <input type= "text" id= "username" value= "Please enter your user name" > <!----> <input type= "Submit" > <!--define submit button--></form><script> var username = document.getElementById (username);// Gets the id attribute username.addeventlistener (' Focus ', function () { Username.select (); }) Username.addeventlistener (' Select ', function () { console.log (username.selectionStart.username.selectionEnd) ; var value = Username.getattribute (' value '); var result = value.substring (username.selectionstart,username.selectionend); Console.log (result); }) </script></body>Set text content
Add the Setselectionrange () method in HTML5 to get the text content of a focus text box
Body><form action= "#" > <input type= "text" id= "username" value= "Please enter your user name" > <!----> <input type= "Submit" > <!--define submit button--></form><script> var username = document.getElementById (username);// Gets the id attribute username.addeventlistener (' Focus ', function () { Username.select (); }) Username.addeventlistener (' Select ', function () { console.log (username.selectionStart.username.selectionEnd) ; var value = Username.getattribute (' value '); var result = value.substring (username.selectionstart,username.selectionend); Console.log (result); }) </script></body>Operating the shear plate
Copy, cut and paste the operation clipboard with Copy;cut,paste
<body><form action= "#" > <input type= "text" id= "username" value= "Please enter your user name" > <input type= "text" ID = "UserName1" > <input type= "submit" ></form><script> var username = document.getElementById (' User Name '); Username.addeventlistener (' Copy ', function (event) {var data = Event.clipboarddata | | window.clipboarddata; Console.log (data); Console.log (' This is a copy operation '); var value = Username.value; var result = value.substring (selectionstart,username.selectionend); Console.log (result); Data.setdata (' text ', result); }); Username.addeventlistener (' Cut ', function () {Console.log (' This is a cut operation '); }); var username1 = document.getElementById (' username1 '); Username1.addeventlistener (' Paste ', function (event) {Event.preventdefault (); var data = Event.clipboarddata | | Window.clipboarddata; var result = Data.getdata (' text '); /* Get DataTransfer Object * GeData () method-Get Data content */ if (result = = = ' User name ') {result = ' * * * '; } Username1.value = result; }) </script></body>
Actions for the drop-down list
is to create a disease with Select and option objects to provide some properties and methods
<form action= "#" > <select id= "yx" > <option id= "DJ" value= "DJ" > Standalone </option> <opt Ion value= "WY" > Web </option> <option value= "dy" > End tour </option> </select> <select id= "Cyx1" multiple size= "5" > <option value= "DJ" > Standalone </option> <option value= "WY" > Web </opti on> <option value= "dy" > End tour </option> </select></form><script> var yx = documen T.getelementbyid (' Yx '); Htmlselectelement Object Console.log (yx.length); Console.log (yx.options); Console.log (Yx.selectedindex);//The index value of <option>//attribute var yx1 = document.getElementById (' yx1 '); The default value for the Size property is 0 console.log (yx1.size); Console.log (Yx1.item (1)); Yx1.remove (2); var dj = document.getElementById (' DJ '); Console.log (Dj.index); Console.log (dj.selected); Console.log (Dj.text); Console.log (Dj.value);</script>
3. Form Verification
To Checkvalidity () if the element value does not have a validation problem, it will be true, if not then return false
An error message is customized for the element with setcustomvalidity (message), and if set, the element is not invalid and displays
<body><form action= "#" > <input type= "text" id= "username" > <input type= "Submit" > </form><script> var username = document.getElementById (' username '); Username.addeventlistener (' Blur ', function () { var value = Username.value; if (value = = = "| | value = = = Undefined | | vaiue = = NULL) { console.log (' Please enter your username '); } ); </script></body>4. Form submission
Submit Event
Submit form with submit
<body><form action= "#" > <input type= "text" id= "username" > <input type= "Submit" > </form><script> var form = document.forms[0]; Form.addeventlistener (' Submit ', function (event) { console.log (' The form has been submitted '); }); </script></body>Submit () method
Submit the form in submit and use any normal button to complete the submission
<body><form action= "#" > <input type= "text" id= "username" > <input id= "QYC" type= "button "Value=" Submit "></form><script> var qyc = document.getElementById (' qyc '); Qyc.addeventlistener (' click ', Function () { var form = document.forms[0]; Form.submit ();//Submit Form });</script></body>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
