Native form elements

This is what every HTML5 form element looks like on your current operating system and browser.

by Joshua Jenkins

Element
Disabled element
Markup

```
<input autofocus>
```

```
<input>
```

```
<input type=text>
```

```
<textarea></textarea>
```

<input type=password placeholder=password>

```
<input type=radio>
```

```
<input type=radio checked>
```

```
<input type=checkbox>
```

```
<input type=checkbox checked>
```

```
<select>
  <option></option>
</select>
```

<select>
  <optgroup label="Option group 1">
    <option>Option 1</option>
    <option>Option 2</option>
  </optgroup>
  <optgroup>
    <option>Option 3</option>
  </optgroup>
</select>

<input type=text placeholder=placeholder>

```
<input type=search>
```

```
<input type=file>
```

LegendLabel
LegendLabel

<fieldset>
  <legend>Legend</legend>
  <label for=field>Label</label>
  <input name=field>
</fieldset>

```
<input type=submit>
```

```
<button>Button</button>
```

```
<input type=email>
```

```
<input type=tel>
```

```
<input type=url>
```

```
<input type=number>
```

```
<input type=number min=0 max=15 step=3>
```

```
<input type=range>
```

```
<input type=range min=0 max=15 step=3>
```

```
<input type=date>
```

```
<input type=month>
```

```
<input type=week>
```

```
<input type=time>
```

```
<input type=datetime>
```

```
<input type=datetime-local>
```

```
<input type=color>
```

```
<input type=required>
```