Send data to processing script located in network (server)

Standart

  <form action="/action_page.xyz" target="_blank" method="post">

  <fieldset>
  <legend>Standart</legend>

    <fieldset>
    <legend>Personal information:</legend>
      First name: <input type="text" name="firstname" id="firstname"/>
      Last name: <input type="text" name="lastname" id="lastname"/>
      Gender:
      <input type="radio" name="gender" value="male" checked/>Male
      <input type="radio" name="gender" value="female"/>Female
      <input type="radio" name="gender" value="other"/>Other
      Password: <input type="password" name="psw" pattern="[A-Za-z0-9-]*"/>
      Avatar: <input type="file" name="avatar"/>
    </fieldset>

    <fieldset>
    <legend>Interests:</legend>
      Life goals:
      <input type="checkbox" name="goals" value="family"/>Familly
      <input type="checkbox" name="goals" value="hobbies"/>Hobbies
      Cars:
      <select name="cars">
        <option value="0" selected="selected">No</option>
          <optgroup label="Swedish Cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
          </optgroup>
          <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </optgroup>
          <optgroup label="Russian Cars" disabled="disabled">
            <option value="lada">Lada</option>
            <option value="uaz">Uaz</option>
          </optgroup>
      </select>
      Sport:
      <select name="cars" size="5" multiple="multiple">
        <option value="0" selected="selected">No</option>
        <option value="football">Football</option>
        <option value="gym">Gym</option>
        <option value="swim">Swimi</option>
        <option value="walk">Walk</option>
      </select>
    </fieldset>

    <fieldset>
    <legend>About you:</legend>
      <textarea name="about" rows="5" cols="30">Share something</textarea>
    </fieldset>

    <fieldset>
    <legend>Button with a trick !</legend>
      <button
        type="button"
        onclick="alert('Hi ' + document.getElementById('firstname').value + ***"
      >
        Say hello to yourself
      </button>
    </fieldset>

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

  </fieldset>
  </form>
  

HTML5

    <form
      action="/action_page.xyz"
      target="_blank"
      method="post"
      oninput="x.value=parseInt(a.value)+parseInt(b.value)"
    >

      Input with datalist:
      <input list="browsers">
      <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>

      Color:
      <input type="color" name="favcolor"/>

      Date:
      <input type="date" name="date" min="1986-09-14" max="2018-06-22"/>

      Time:
      <input type="time" name="usr_time"/>

      Email:
      <input type="email" name="email"/>

      Number:
      <input type="number" name="points" min="0" max="100" step="3" value="30"/>

      Range:
      <input type="range" name="range" min="0" max="10"/>

      URL:
      <input type="url" name="homepage">

      Output element: <br/>
      0
      <input type="range" id="a" name="a" value="50"/>
      100 +
      <input type="number" id="b" name="b" value="50"/>
      =
      <output name="x" for="a b"/></output>

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

    </form>
  

Attributes

• <form ... novalidate> - to avoid validation by browser of a specific fields
• <form ... autocomplete="on"> ... - autocomplete with previously inserted values, forms inputs
• <input autocomplete="off"> ... - disable some inputs autocompletion
• <input type="image" src="img.gif" alt="Submit" width="48" height="48"> - define an image as the submit button
• Regular
  • disabled - field should be disabled
  • readonly - read only (cannot be changed)
  • maxlength - maximum number of characters
  • size - width (in characters)
  • value - default value
• HTML5
  • required - required (must be filled out) unsupported in IE9 (and earlier), or in Safari
  • min - minimum value unsupported in IE9 (and earlier), and IE10 for dates and time
  • max - maximum value unsupported in IE9 (and earlier), and IE10 for dates and time
  • step - legal number intervals unsupported in IE9 (and earlier)
  • pattern[="[A-Za-z]{3}"] - regular expression to check the input value against unsupported in IE9 (and earlier), or in Safari 10 and earlier
  • placeholder[="First name"] - a hint that describes the expected value unsupported in IE
  • autofocus - field should automatically get focus unsupported in IE9 (and earlier)
  • multiple - user is allowed to enter more than one value in the input element (used with email and file buttons)unsupported in IE9 (and earlier)
  • form - specifies one or more forms an element belongs to unsupported in IE
  • formaction[="/action_page2.php"] - overrides the action attribute of the form (used with submit and image buttons) unsupported in IE9 (and earlier)
  • formenctype[="multipart/form-data"] - how the form data should be encoded when submitted (used with submit and image buttons, only for forms with method="post") unsupported in IE9 (and earlier)
  • formmethod[="post"] - overrides the method attribute of the form-element (used with submit and image buttons) unsupported in IE9 (and earlier)
  • formnovalidate - overrides the method attribute of the form-element (used with submit buttons) unsupported in IE9 (and earlier), or in Safari 10 and earlier
  • formtarget[="_blank"] - overrides the target attribute of the form-element (used with submit and image buttons) unsupported in IE9 (and earlier)
  • minlength - minimum number of characters
  • autocapitalizealue - capitalization behavior for user input: none, off, characters, words, sentences