HTML Forms ( How to create a HTML form ? )

HTML Forms

One of the more built in way to interact with the users directly from HTML is the use of forms and input elements.

HTML forms have no relation to Visual Basic forms. You can add buttons, list boxes, radio buttons etc. Forms are originally intended to let the user send data back to the server.

<FORM>: Creates an HTML form, used to enclose HTML controls like buttons and text fields

Attributes are:

ACTION

Gives the URL that will handle form data. AUTOCOMPLETE Set to True, if you want Internet Explorer to automatically complete data in control fields based on what user have entered before CONTENTEDITABLE Set to True, If the content of the form is editable DISABLED Set to True for disabling the form NAME Gives a name to the form TARGET Indicates named frame for the browser to display the form TABINDEX Sets a tab index for the forms in the page

METHOD Indicates a method or protocol for sending data to the target action URL. The GET method is the default. This method sends all the form name/value pair information as URL? Name=value &name=value &name=value Another method POST, sends the content of the form similar to GET, but are in environment variables

---

There are plenty of controls available in HTML. Many HTML controls are created with the <INPUT> element, using a different value for the TYPE attribute to create various controls <INPUT TYPE= BUTTON>: Used to create an HTML button in a form. Attributes are: ACCESS KEY Keyboard Shortcut key. A single character is used as the value of the attribute DISABLED Specifies that the element is disabled when first displayed Stand-Alone attribute NAME Specifies the name of the element SIZE Sets the size TABINDEX Sets the TABINDEX of the element, which locates it in the tab order of the form, allowing the user to press the TAB key and navigate from element to element VALUE Sets the Caption of the element

---

<INPUT TYPE= BUTTON>: Creates a checkbox in the form Attributes are: CHECKED: - Indicates if the checkbox should appear checked initially or not. Stand-Alone attribute. ACCESSKEY, DISABLED, NAME, SIZE, VALUE [Refer TYPEBUTTON]

---

<INPUT TYPE= HIDDEN>: Stores hidden data i.e. Data that is not visible to users unless they view the page source. Attributes are: NAME, VALUE

---

<INPUT TYPE= IMAGE>: Indicates an IMAGE users can click much as they would a SUBMIT button. i.e. it creates image sub buttons Attributes are: ACCESSKEY, DISABLED, NAME, SIZE, TABINDEX, VALUE [Refer TYPEBUTTON] ALIGN, ALT, SRC [Refer<img>]

---

<INPUT TYPE=PASSWORD>: Creates a Password text field, which masks typed input. Attributes are: ACCESSKEY, AUTOCOMPLETE, CONTENTDISABLE, DISABLED, NAME, SIZE, TABINDEX, VALUE [Refer PREVIOUS ELEMENT TAGs] MAXLENGTH: Sets the maximum length of the data in the comb in characters. READONLY: Set to true for the control to be READONLY.

---

<INPUT TYPE=RADIO>: Create RADIO buttons Attributes are ACCESSKEY, CHECKED, DISBALED, NAME, SIZE, TABINDEX, VALUE

---

<INPUT TYPE=RESET>: Create RESET button in a form. Resets all field into their original value. Attributes are ACCESSKEY, DISBALED, NAME, SIZE, TABINDEX, VALUE

---

<INPUT TYPE=SUBMIT>: Create SUBMIT button that the user clicks to send data in the for back to the web server. Attributes refer RESET

---

<INPUT TYPE=TEXT>: Creates a textfeild that the user can enter or edit text in. Attributes: REFER [ TYPE=PASSWORD]

---

<TEXTAREA>……………………<TEXTAREA>: Creates a text-area, much like a 2-dimensional text field. Attributes are ACCESSKEY, DISABLED, NAME, READONLY, TABINDEX. COLS-Specifies No of columns visible in control. ROWS-Specifies no of Rows in the control. WRAP-Determines the word wrap behavior for the entered. Set to OFF-No Word Wrapping. SOFT-Text is wrapping but Wrapping is not transmitted to the server. HARD-Wrapped text is preserved when submitted to the server.

---

<SELECT>&<OPTION>: <SELECT>: Displays a select control much like a dropdown list Attributes are ACCESSKEY, ALIGN (LEFT, TOP, MIDDLE, BUTTOM), DISABLED, NAME, SIZE, TABINDEX. MULTIPLE: Indicates that more than one option can be selected at a time. <OPTION>: Specifies the item in the list of SELECT control Attributes are DISABLED, TABINDEX, VALUE LABEL- Holds a Short label. SELECTED-Indicates that item should appear selected first

#HTML