Dart
Dart
HTML Canvas
HTML Canvas
Redis
Redis
Bash
Bash
JavaScript
JavaScript
HTML

HTML Forms

Submit and Reset Buttons

<form action="register.php" method="post">
  <label for="foo">Name:</label>
  <input type="text" name="name" id="foo">
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

#↓ Preview

Name: Submit the data to server; Reset to default values

Datalist tags(HTML5)

<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser"/>
<datalist id="list">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

#↓ Preview

Choose a browser:

Fieldset tags

<fieldset>
    <legend>Your favorite monster</legend>
    <input type="radio" id="kra" name="m">
    <label for="kraken">Kraken</label><br/>
    <input type="radio" id="sas" name="m">
    <label for="sas">Sasquatch</label>
</fieldset>

#↓ Preview

Your favorite monster Kraken
Sasquatch

Select tags

<label for="city">City:</label>
<select name="city" id="city">
    <option value="1">Sydney</option>
    <option value="2">Melbourne</option>
    <option value="3">Cromwell</option>
</select>

#↓ Preview

City: Sydney Melbourne Cromwell A select box is a dropdown list of options

Checkboxes

<input type="checkbox" name="s" id="soc">
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas">
<label for="bas">Baseball</label>

#↓ Preview

Soccer Baseball Checkboxes allows the user to select one or more

Radio Buttons

<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>

#↓ Preview

Male Female Radio buttons are used to let the user select exactly one

Textarea tags

<textarea rows="2" cols="30" name="address" id="address"></textarea>

#↓ Preview

Textarea is a multiple-line text input control

Input tags

<label for="Name">Name:</label>
<input type="text" name="Name" id="">

#↓ Preview

Username: See: HTML input Tags

Label tags

<!-- Nested label -->
<label>Click me 
<input type="text" id="user" name="name"/>
</label>

<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>

for in a label references an input's id attribute

Form Attribute

Attribute Description
name Name of form for scripting
action URL of form script
method HTTP method, POST / GET (default)
enctype Media type, See enctype
onsubmit Runs when the form was submit
onreset Runs when the form was reset

Form tags

<form method="POST" action="api/login">
  <label for="mail">Email: </label>
  <input type="email" id="mail" name="mail">
  <br/>
  <label for="pw">Password: </label>
  <input type="password" id="pw" name="pw">
  <br/>
  <input type="submit" value="Login">
  <br/>
  <input type="checkbox" id="ck" name="ck">
  <label for="ck">Remember me</label>
</form>

#↓ Preview

Email:

Password:

Remember me The HTML <form> element is used to collect and send information to an external source.

Comments
Related