Tuesday, July 30, 2013

HTML: Tutorial 6 create text fields for users to input names and passwords

       Ok we have gone over alot of great tools to make your website look great. Now we are going to step a little deeper into the elements that make websites more interactive. Today we are going to make text boxes that users can type thier names,emails,and passwords in. Alright you ready? Great lets get it on !!
Go ahead a make a blank text document and name it  Texter.html and place the starting code.
<html>
<body>


</body>
</html>

Good now 1st we are going to make a textbox that a user can input his name or email in.
 The <form action=" "> basically states we are going to input information that will be used in a webserver. The <input="  "> will tell the webpage to make a textbox field which the user can enter his or her information. You let the input command know that your going to let someone write text inside a textbox simply putting the word "text" . Now type this
<html>
<body>

<form action="">
Email:     <input type="text" name="email">
</form>




</body>
</html>

Ok now save your Texter.html file and double click on it. It should look like this





Now go ahead and type in it. Haha that was easy and fun. Now we will make the password portion. Now to make a password you need to change the input code to this <input type="password"  . The reason is so that the website knows to make a circle or asterisk when you put in the code and to use it as a password. Go ahead and add this

<html>
<body>

<form action="">
Email:     <input type="text" name="email"> <br>
Password:  <input type="password" name="password">
</form>




</body>
</html>

Now after typing it in go ahead and double click on your file and it should look like this







Ok now type in the password field and see what happens.  The password field will not display what you typed in but circles or asterisk . If this didnt work look over your code carefully. Also you notice something we didnt talk about <br> . Ok <br> means a break in the line, like when you press return to start in a new line. Alright go ahead and practice this , as we will continue to make more interactive elements to your website. Go to lesson 7    Click here for lesson 7





No comments:

Post a Comment