- Three ways to use <script></script>:
- Put in the <body>
- Put in the
- Placed in an external JS file
- 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><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Welcome to Login</title> <Linkhref=".. /static/css/zz.css "rel= "stylesheet"type= "Text/css"> <Script> functionMyLogin () {varOuname=document.getElementById ("name"); varOerror=document.getElementById ("Error_box"); varOpassword=document.getElementById ("Password"); if(OUname.value.length<6) {oerror.innerhtml="User name minimum of 6 characters" } } </Script></Head><Body><Divclass= "box" > <Divclass= "Jar" ><H2>Welcome to Login</H2></Div> <Divclass= "Input_box" >Name:<inputID= "Name"type= "text"placeholder= "Please enter user name"><BR>Password:<inputID= "Password"type= "Password"placeholder= "Please enter password"><BR> </Div> <DivID= "Error_box"><BR></Div> <Divclass= "Ja" > <Buttononclick= "MyLogin ()">Login</Button> <Buttontype= "button"onclick=window.alert ("Do you want to cancel the login?" ")>Cancel</Button> </Div> </Div></Body></HTML>
Div{margin:0 Auto;text-align:Center;}. Box{width:500px;Height:200px;Border-color:Blue;Border-style:Groove;Border-width:1px;Margin-top:100px;}. Input_box{font-size:18px;Font-weight:Bold; }. Ja{width:100px;Height:30px;}
JavaScript Basics, Login front-end verification