130 likes | 229 Views
HTML FORMS The TEXT Object. Presented By: Ankit Gupta. HTML Forms. HTML Forms provides data gathering functionality to a webpage. They provide a full range of GUI controls. They collect data using different controls and submit it to the web server. Tag used: <form>…</form>.
E N D
HTML FORMSThe TEXT Object Presented By: Ankit Gupta
HTML Forms • HTML Forms provides data gathering functionality to a webpage. • They provide a full range of GUI controls. • They collect data using different controls and submit it to the web server. • Tag used: <form>…</form>
The <INPUT> Tag <input name=“<NameOfTheObject>” type=“TEXT” value=“<DefaultValue>”> • It defines a form control for the user to enter input. • Common input objects used are: • Text • Text Area • Radio Button • Check Box • Buttons
The TEXT Object • It defines the input type as text. <input type=“text”> • Text objects are data entry fields. • They accept a single line of text entry. • The input text entry is submitted to the web server. • The information is usually processed through a server side scripting language such as PERL, PHP, ASP, etc.
TEXT Attributes SIZE • It defines the width of the text field. • That is how many visible characters it can contain.
TEXT Attributes MAXLENGTH • It defines the maximum length of the text field. • That is how many characters can be entered in the field. • If you do not specify a maxlength, the user can easily enter more characters than that are visible in the field at one time.
TEXT Attributes NAME • It adds an internal name to the field. • It makes each element unique • So that the program that handles the form can easily identify the fields. VALUE • It defines a default value to appear in the text box
TEXT Attributes ALIGN • It defines how the fields is aligned. • Valid alignments are: • TOP • MIDDLE • BOTTOM • RIGHT • LEFT
TEXT Attributes TABINDEX • It defines the order in which the different fields should be activated when the visitor clicks the TAB key.
JavaScript Events JavaScript provides the following event handlers for the text element’s events: • onFocus() – Fires when the form cursor enters into the textbox. • onBlur() – Fires when the form cursor is moved away from the textbox. • onSelect() – Fires when the text is selected in the textbox. • onChange() – Fires when the text is changed in the textbox.
An Example <html> <head> <title>My Page</title> </head> <body> <form name="myform"> <input type="text" size="25" value="Enter your name here!"> </form> </body> </html> Output: