We have learned how to set up forms on a webpage using HTML. In this lesson, we shall focus on creating more complex form. Let begins with the input element we have used it to create a form in the previous lesson but we have not discussed it.
The input element comprises several attributes, namely type, name, value, size, maxlength, checked and src. The name attribute is an identification for the input element. The value attribute specifies the initial value of the object created by the input element. The size attribute specifies the number of characters visible in a text box and the maxlength limits the number of characters input into a text box.
The input element can create different kinds of objects on the webpage like a submit button, a textbox, a checkbox, a radio button, a reset button and a password entry box defined by the value of the type attribute.The following examples show how the aforementioned objects are created.
To create a text box with a certain size, use the following HTML syntax:
<input name=”Username” type=”text” size=”30″ >
If the type value is hidden, the text box will not be visible to the user but the value will still be sent to the server. The HTML syntax is:
<input name=”Username” type=”hidden”>
To present the user with a password box, change the value of type to the password. When you enter text into this field it is masked with either asterisks or dots (depending on your browser)so as to hide sensitive information like bank login password, credit card number and more.
The HTML syntax is:
<input name=”password” type=”password” size=”10″>
The reset button allows the user to clear all the data into text boxes and retype the information. To create the reset button, change the value of the type attribute to reset. The html syntax is:
<input name=”reset” type=”reset” value=”Clear All Entries”>
The Submit Button
The submit button allows the user to send the data entered into various fields to the server. The html syntax is
<input name=”submit” type=”Submit” value=”Submit Your Entries”>
We shall continues discussing more advanced form’s elements in html in our next lesson.