Communication Technology: Creating Forms

I learnt how to make forms in which users can submit information today. Pretty simple really. The image below shows the coding I've learnt.

There are two tags that are needed: <form> and <input>. Form dictates that it is a form simply, and input tells the computer that these are user-defined fields.

Inputs are defined by the user. I've used name and age, but it could be anything.

Finally, there's a submit button. A whole host of other directions can be given such as <password> or <file>. Using previous knowledge of CSS, I quickly changed the font to Arial from Times New Roman- this is what the span class style 1 bits are; merely telling the browser to show the text in Arial.

The coding... (click to enlarge):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7xt3U7PUKkj9x52Jser8B9nYNnEDV8NvxfCnWs7FzgcfFTyn5dDZTjOW1x3MR2er6Bpu_6vuGz227_Nu4A5s6J5_ervbVRnNIKHypXKvZLpOIbscHaYsF4GiajELwilahxfnVQr6SCk/s1600/blogform.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7xt3U7PUKkj9x52Jser8B9nYNnEDV8NvxfCnWs7FzgcfFTyn5dDZTjOW1x3MR2er6Bpu_6vuGz227_Nu4A5s6J5_ervbVRnNIKHypXKvZLpOIbscHaYsF4GiajELwilahxfnVQr6SCk/s320/blogform.jpg" width="320" /></a></div>


<div class="separator" style="clear: both; text-align: left;">
...and here's the information as it appears in preview (click to enlarge):</div>
<div class="separator" style="clear: both; text-align: center;">

</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9no3199-6brjDINPLc_YKksNb1ZZfUJuy6PtQgaaAlk48ssaVIXz20ohzQERey-OjNB1O6_JYRUNdaGrY0ys71VuzSQKMmNVEqsDoNBOMtwZ1wNscmDQWuHUB0ODRkPXXZ299W99iPdI/s1600/blogform1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9no3199-6brjDINPLc_YKksNb1ZZfUJuy6PtQgaaAlk48ssaVIXz20ohzQERey-OjNB1O6_JYRUNdaGrY0ys71VuzSQKMmNVEqsDoNBOMtwZ1wNscmDQWuHUB0ODRkPXXZ299W99iPdI/s320/blogform1.jpg" width="320" /></a>