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
No comments:
Post a Comment