Javascript AJAX jQuery HTML PHP Example MORE

HTML Form Elements Tutorial with Example

    There are several element in html. Such as:
  1. <input>elment
  2. <select>elment
  3. <textarea>elment
  4. <button>elment

In this chapter we describe all HTML element with easy example.

<input> elment

This is the most important and frequently used element of the form. There are different type of attribute is available for input HTML.

Example
  • <input> type="submit"
  • <input> type="tel"
  • <input> type="text"
  • <input> type="number"
Example:
<!DOCTYPE html>
<html>
<body>
 
<h2>The input Element</h2>
 
<form action="action.php">
  Enter your name:
  <input name="fullname" type="text">
  <br><br>
  <input name="phone" type="tel">
  <br><br>
  <input type="submit">
</form>
 
</body>
</html>

Run it yourself

The<select> Element

The <select> is used to show dropdown list.

Example
<!DOCTYPE html>
<html>
<body>
 
<h2>The select Element</h2>
<p>It is used to show dropdown list.</p>
<form action="action_page.php">
  <select name="class">
    <option value="Class One">Class One</option>
    <option value="Class Two">Class Two</option>
    <option value="Class Three">Class Three</option>
     </select>
  <br><br>
  <input type="submit">
</form>
 
</body>
</html>

Run it yourself

The <option> elements specify an option that can be selected. By default, the first option in the drop-down list is selected.To define a perticular option, add the selected attribute to the option.

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

Multiple Selectbox:

To select multiple option multiple attribute is used.

Example
<!DOCTYPE html>
<html>
<body>
 
<h2>The select Element</h2>
<p>It is used to show dropdown list.</p>
<form action="action_page.php">
  <select name="class" multiple>
    <option value="Class One">Class One</option>
    <option value="Class Two">Class Two</option>
    <option value="Class Three">Class Three</option>
     </select>
  <br><br>
  <input type="submit">
</form>
 
</body>
</html>


Run it yourself

<textarea> Element

The HTML <textarea> tag is used within a form to allow the user to write multiple number of line. It is generally used for message, mail box, address field.

Example
<!DOCTYPE html>
<html>
<body>
 
<h2>Textarea</h2>
<p>Allow user to write multiple line.</p>
 
<form action="/action_page.php">
  <textarea name="message" rows="4" cols="100">Students tutorial is a online tutorial for HTML, PHP, CSS.</textarea>
  <br>
  <input type="submit">
</form>
 
</body>
</html>


Run it yourself

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

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

<button> Element

The <button> element is used to submit the form. It is clikable.

Example
<!DOCTYPE html>
<html>
<body>
 
<h2>The button Element</h2>
 
<button type="button">Click Me!</button>
 
</body>
</html>

Run it yourself