- Three ways to use <script></script>:
- Put in the <body>
- Put in the
- Put in an external JS file
<! DOCTYPE html>"en">"UTF-8"> <title> Login </title>"Denglu"></p> <script>document.write (Date ()); document.getElementById ("Denglu"). innerhtml=Date ();</script><button type="Button"Onclick=window.alert ("Please login First") > Login </button></body>
-
- Three ways to output data:
- Use the document.write () method to write content to an HTML document.
- Use the Window.alert () pop-up warning box.
- Writes to an HTML element using InnerHTML.
- Use the ID property to identify the HTML element.
- Use the document.getElementById (ID) method to access HTML elements.
- Use innerHTML to get or insert element content.
- The login page prepares:
- Add an Error prompt box.
- Write a good html+css file.
- Set the ID of each INPUT element
- Defines a JavaScript function.
- Verify user name 6-20-bit
- Verify password 6-20-bit
- The onclick invokes this function.
<! DOCTYPE html>"en">"UTF-8"> <title>mis Quiz platform </title> <link rel="stylesheet"Type="Text/css"href="T4.css"> <script >function MyLogin () {var ouname= document.getElementById ("uname"); var oerror= document.getElementById ("Userpass"); var uerror=document.getelementbyid ("Errorone"); if(Uname.value.length<6 | | Umane.value.length>20) {uerror.innerhtml="user name cannot exceed 6-20 length"; } } </script >class="Mubiao"> class="Inputone">User name:<input type="text"Name="User name"Placeholder="Please enter user name"><br> </div> <divclass="Inputone">Password:<input type="Password"Name="Password"Placeholder="Please enter your password"><br> </div> <div id="Errorone"><br></div> <divclass="Login"> <button onclick="Login ()"> Member Login </button> </div> h2{Text-align:center;margin-bottom:0;background-color:#66b3ff;}. mubiao{width:500px; height:400px; Margin:auto; Background-color:#ffffff;}.inputone{height:50px; margin:0 Auto;}. login{witdth:40px; height:50px;}
t4{text-align:center;margin-bottom:0;background-color: #66b3ff;}
. mubiao{
width:500px;
height:400px;
Margin:auto;
Background-color: #ffffff;
}
. inputone{
height:50px;
margin:0 Auto;
}
. login{
witdth:40px;
height:50px;
}
JavaScript Basics, Login front-end verification