Forms

The Form Element

Any webpage can have one or more <form> elements
The <form> element is a container for all the form controls
Each form needs a unique name.

<form
  name="login-form"
  action="login.php"
  method="post"
  enctype="application/x-www-form-urlencoded"
></form>

The action attribute explains where the form data will be sent.
The method can be post or get. These explain how the form data is bundled.
The enctype can be the default value (as shown) or multipart/form-data.
To submit a file in the form you need to set the enctype to multipart/form-data

Form Labels

You can put a line around a group of form elements with a <fieldset>
You can attach a label to the fieldset with a <legend> tag
Each user control should also have a <label> element.
Clicking on a <label> will place the focus inside the connected <input>
The way to connect a <label> to an <input> or <select> or <textarea> is with the for attribute inside the <label> and an id attribute inside the form element.

<fieldset>
  <legend>Choose a Flavour</legend>
  <p>
    <label for="choc">Chocolate</label>
    <input type="radio" name="flavour" id="choc" value="Chocolate" />
  </p>
  <p>
    <label for="van">Chocolate</label>
    <input type="radio" name="flavour" id="van" value="Vanilla" />
  </p>
</fieldset>

Input Elements

There are numerous types of user controls that you can use in a form.

<input
  type="text"
  name="user"
  id="user"
  value=""
  placeholder="default text"
  required
/>
<input
  type="email"
  name="user"
  id="user"
  value=""
  placeholder="user@domain.com"
/>
<input type="password" name="user" id="user" value="" autocomplete="no" />
<input type="number" name="num" id="num" value="1" min="1" max="99" step="1" />
<input type="color" name="bg" id="bg" value="#bada55" />
<input type="checkbox" name="alive" id="alive" value="yes" checked />
<input type="radio" name="flavour" id="flavour" value="vanilla" checked />
<input type="hidden" name="price" id="price" value="12.99" />
<input type="search" name="search" id="search" />
<input
  type="range"
  name="price"
  id="price"
  min="1.00"
  max="30.00"
  step="2.50"
/>
<input type="date" name="dt" id="dt" />
<input type="datetime" name="dt" id="dt" />
<input type="datetime-local" name="dt" id="dt" />
<input type="time" name="timmy" id="timmy" />
<input type="tel" name="phone" id="phone" />
<input type="file" name="resume" id="resume" />

A textarea is a multi-line text input area.
It has rows and cols attributes to say how much space is created for the user input but this is not usually used. Instead, CSS gets used to set the size.

<textarea id="comments" name="comments">Default text goes here</textarea>

To create a dropdown list in HTML we use a combination of two elements.

<select id="people" name="people">
  <optgroup label="female">
    <option value="Linda">Linda</option>
    <option value="Tina">Tina</option>
  </optgroup>
  <optgroup label="male">
    <option value="Bob">Bob</option>
    <option value="Gene">Gene</option>
  </optgroup>
</select>

If you want to allow the user to select more than one value, you can add the multiple attribute to the <select> element.
If you want to change the dropdown list to scrollable list then you can add a size attribute with a number as the value.
If you want to have one of the options selected by default then you can add a selected attribute to one of the options.
You can also group <option>s together by wrapping them in an <optgroup> element.

Buttons

There are several types of buttons in HTML forms

<input type="submit" id="btnSubmit" name="btnSubmit" value="Send" />
<input type="reset" id="btnClear" name="btnClear" value="Clear" />
<input type="image" id="btnImg" name="btnImg" src="./img/pic.jpg" />
<input type="button" id="btnAdd" name="btnAdd" value="Add" />

<button id="btnClick">Click Me</button>

Form Design Registration Form Design tutorial

# Forms

# The Form Element

# Form Labels

# Input Elements

# TextArea and Dropdown List Elements

# Buttons

Forms

The Form Element

Form Labels

Input Elements

TextArea and Dropdown List Elements

Buttons