HTML Learning center for beginners and intermedite programmers: HTML textfields

Tuesday, July 30, 2013

HTML: Tutorial 7 Radio Buttons and Checkboxes

Alright how are you doing there buddy. You have come a long way and learned alot of cool stuff to make your website look awesome and professional. I am proud of you and your accomplishments!! Now we will learn some more cool stuff to add to our websites. Radio buttons and Checkboxes!!
Ok open your text editor and type the basic code
<html>
<body>

</body>
</html>

1st is radio buttons like when you go on a website to sign up and they ask if your male or female. Like lesson 6 we use <form> and <input> but this time the input will look like this <input type="radio" name="sex" value="male">Male . Now to explain <input type="radio" means we are going to make radio buttons. Now name="sex" value="male" name=" " is the group the radio button belongs to and value=" " defines what will be submitted to webserver if checked. The name and value will be very important when you have multiple groups of separate radio buttons. At the end of the code see >Male. That means next to the radio box thats the word you will see onscreen. Ok now type in this code

<html>
<body>

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

</body>
</html>

Ok now save your file as radio.html and double click your file. It should look like this

Now note I press the male button if you didn't press anything both would be blank. With radio buttons you can select only one option in each group. If you select male then try to select female , the male will be unselected. Now on to checkboxes. We will use the same file radio.html for both lesson's. Now instead of <input type="radio" it will be checkbox. You see where it says HTML is easy, thats the part after the > meaning thats what you will see on your screen. Now add in the checkbox code after the radio code.

<html>
<body>

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<form action="">
<input type="checkbox" name="program" value="mycode">HTML is easy<br>
<input type="checkbox" name="program" value="mycode">HTML is hard
</form>

</body>
</html>

Ok now save your file, then double click and it should look like this on your webbrowser.

Alright now your code is looking more like programmers code , confusing to a regular persons eye haha. If your webpage doesn't look similar trust me look over your code carefully and make sure you didnt miss anything. Ok wow you really made it, no longer a beginner after finishing this. Now your coding like a pro and I am proud of you for going through all these lesson's but we got more good stuff comming up for you here . Click here for the next tutorial

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