HTML Forms

HTML Forms

Text Box:

The size Attribute

The size attribute specifies the size (in characters) for the input field.

The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field.

<form action="">

          First Name: <input type="text" name="firstname" value="Piyush" size="40"><br/>

          Last Name: <input type="text" name="lastname" maxlength="10">

</form>

Example:

<form action="" method="">

  First name:<input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  E-mail: <input type="email" name="email" ><br>

  <input type="submit">

</form>

Combo Box/List Box:

The <select> Element

The <select> element defines a drop-down list:

<select name="cars">

  <option value="volvo">Volvo</option>

  <option value="rits">Ritz</option>

  <option value="fiat">Fiat</option>

  <option value="audi">Audi</option>

</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

<option value="fiat" selected>Fiat</option>

Textarea (Multiline Textbox):

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">

Shree Matrumandir College,

A-54, Panchayat Nagar,

Uni Road,

Rajkot.

</textarea>

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

Buttons (Simple Button/Submit Button/Reset Button):

The <button> Element

The <button> element defines a clickable button:

<button type="button">Click Me!</button>

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:

Example:

<form action="">

  First name:<br>

  <input type="text" name="firstname" value="Piyush"><br>

  Last name:<br>

  <input type="text" name="lastname" value="Patel"><br><br>

  <input type="submit" value="Submit">

  <input type="reset">

</form>

Radio Button/Option Button

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Check Box:

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>

Courses:
  <input type="checkbox" name="SSC" value="ssc"> SSC<br>
  <input type="checkbox" name="HSC" value="hsc"> HSC<br>

  <input type="checkbox" name="BSc." value="bsc"> BSc.

</form>