Home > Developer > Web Develop
In the Web page we will often see a variety of user information to fill out the form, which will include various input boxes, buttons, mandate boxes and Drop-down menu, today we will be the simplest example of a simple version of the user information to fill out the form (use HTML text here), for beginners only reference, also please predecessors a lot of advice!
In this example, we will make a simple verification of the information entered by the User. The main interpretation of the user name, password, Confirm password can not be empty, password and Confirm password to maintain Consistency.
Note the Point:
1, the user information fill in a form form, you can only appear a submit button submission, This situation is relatively simple, only need to add onsubmit= "return check" in the body module <form>.
however, if more than one form is submitted, then the function check (form) in script must correspond with the different form one by one in <body> to verify the validity of the input respectively.
2. Through a for loop, the element in form is traversed, the main for loop condition range, This example of the previous three elements as an example.
3, the effect of the demo window pop-up-----"title" can not be Empty. If the user name cannot be empty
<! DOCTYPE html>{margin:0; Padding:0; List-style:none; } Body{font-family:sans-serif,verdana, Helvetica, Arial; } #main {padding-left:350px; }. KV-item{padding-left:100px; Padding-bottom:20px; }. KV-label{display:inline; height:28px; line-height:28px; Margin-left:-100px; float: left; Text-align:right; width:100px; }. text-align{border:1px Solid #474E63; Color: #0A1844; height:26px; line-height:26px; Padding:02px; width:177px; Text-align:left; } #submit {margin-left:80px; border:1px Solid #474E63; height:26px; Font-weight:bold; } #reset {border:1px Solid #474E63; height:26px; Font-weight:bold; } </style> <!--css Section Ends--<!--insert JS code here--<script type= "text/javascript" >//determine the first three form elements (user name, password, Confirm password is Empty) functionCheck (Form) {varcheck=true; varFlag=0; for(i=0;i<3;i++){ if(form.elements[i].value== "") {alert (form.elements[i].title+ "cannot be empty!" "); Form.elements[i].focus (); Check=false; return false;} //determine if the password entered two times is the same if(i==2) if(form.pwd.value!=Form.repwd.value) {alert ("two times input password is different, please re-enter!" "); Form.repwd.value=""; Form.pwd.value=""; //Form.pwd.focus ();I=i-2; Continue; } }returncheck;}</script><!--js code end--> for= "name" > nickname:</label> </span> <input type= "text" name= "name" class= "text-align" id= "name" placeholder= "* required" autofocus size= "title=" username "> </div> <div class=" Kv-item "> <span class=" kv-label "> <label class=" TSL " for= "pwd" > Secret code:</label> </span> <input type= "password" name= "pwd" class= "text-align" id= "pwd" placeholder= "* required" size= "title=" password "> </div> <div class=" kv-item "> < Span class= "kv-label" > <label class= "tsl" for= "repwd" > Confirm password:</label> </span> <input type= "password" name= "repwd" class= "text-align "id=" repwd "placeholder=" * required fields "size=" title= "confirm password" > </div> <div class= "kv-item" > <span class= "kv-label" > <label class= "tsl" for= "sex_boy" > Sex :</label> </span> <input type= "radio" name= "sex" value= "M" checked >male<input type= "radio" name= "sex" value= "F" >female</div> <div class= "kv-item" > <span class= "kv-label" > <label class= "tsl" for= "student" > Health day:</label> </span> <table> <tr> <th> <select> <option value= "gregorian" > Gregorian calendar </option> <option value= "lunar calendar" > Lunar </option> ; <select> </th> <th> <select> <option value= "year" > year </o ption> <option name= "year" value= ">2016</option> <option name=" year "value=" 2015 " >2015</option> <option name= "year" value= "the" >2014</option> <option name= "year "value=" >2013</option> <select> </th> <th> <select> <option name= "month" value= "moon" > Month </option> <option name= "month" value= "" >01</option> ; <option name= "month" value= "up" >02</option> <option name= "month" value= "in" >03</option> <option name= "month" value= ">04</option> <option name=" month "value=" >05</option> " <option name= "month" value= ">06</option> <option name=" month "value=" >07</optio n> <option name= "month" value= ">08</option> <option name=" month "value=" >09< " /option> <option name= "month" value= "ten" >10</option> <option name= "month" value= "one" > 11</option> <option name= "month" value= ">12</option>" <select> </th> <th> <select> <option value= "daily" > Day </option> <option name= "day" value= >01</option> <option name= "day" value= "<option name=" Day "value=" >03</option> <option name= "day" value= "" ">04</option> <option na Me= "day" value= ">0"5</option> <option name= "day" value= "from" >06</option> <option name= "day" value= "07" & gt;07</option> <option name= "day" value= "the" >08</option> <option name= "day" value= "name=" >09</option> <option "day" value= "ten" >10</option> <option name= "day" VA lue= "one" >11</option> <option name= "day" value= "one" >12</option> <option name= "da Y "value=" >13</option> <option name= "day" value= "+" >14</option> <option Name = "day" value= "all" >15</option> <option name= "day" value= "+" >16</option> <option Name= "day" value= "+" >17</option> <option name= "day" value= "all" >18</option> <opti On Name= ' Day ' value= >19</option> <option name= ' Day ' value= ' >20</option> < Option Name= "day" value="$" >21</option> <option name= "day" value= "all" >22</option> <option name= "day" VA lue= ">23</option> <option name=" Day "value=" >24</option> <option name= "da Y "value=" >25</option> <option name= "day" value= "x" >26</option> <option Name = "day" value= ">27</option> <option name=" day "value=" <option " Name= "day" value= ">29</option> <option name=" Day "value=" >30</option> <opti On Name= ' Day ' value= >31</option> <select> </th> </tr> </tabl e> </div> <div class= "kv-item" > <span class= "kv-label" > <label class= "tsl"for = "student" > Ground address:</label> </span> <table> <tr> <th> <select> <option value= "provinces, municipalities" > provinces, Municipalities </option> <option value= "shanghai" > Shanghai </option> <option value= "henan province" > Henan Province </option> <optio n value= "anhui province" > Anhui Province </option> <select> </th> <th> <select> <option value= "city" > City </option> <option value= "shanghai" > Shanghai & lt;/option> <option value= "jiaozuo" > Jiaozuo </option> <option value= "chaohu" > Chaohu < ;/option> <select> </th> <th> <select> <option value= "district, county" > district, County </option> <option value= "huangpu" > Huangpu </option> <option Value= "putuo" > Putuo </option> <option value= "pudong new area" > Pudong New Area </option> <select> </th> </tr> </table> </div> <div class= "kv-item" > <span C lass= "kv-label" > <label class= "tsl" > Mobile number:</label> </span> <input type= "pass Word "name=" telephone "class=" text-align "placeholder=" * required "size=" title= "mobile number" > </div> <d IV class= "kv-item" > <input type= "submit" name= "submit" id= "submit" value= "submit" > <input type= "res" ET "name=" reset "id=" reset "value=" reset "></div> </form> </div></body>
The demo effect is:
When an item is not filled in, the presentation style is:
Code Demo finished, What is inappropriate please advise!
JS page user information fill out a form
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
