Input
Text boxes allow the user to input a simple text value. A text box only allows for a single line of input.
<form>
<fieldset>
<legend>Your details</legend>
<div class="field">
<label class="label" for="textinput">Name</label>
<div class="control">
<input id="textinput" name="textinput3" class="input" type="text" />
</div>
<p class="help">Your name</p>
</div>
<div class="field">
<label class="label" for="numberinput">Number</label>
<div class="control">
<input id="numberinput" name="numberinput3" class="input" type="number" />
</div>
</div>
<div class="field">
<label class="label" for="emailinput">Email address</label>
<div class="control">
<input id="emailinput" name="emailinput3" class="input" type="email" />
</div>
</div>
<div class="field">
<label class="label" for="passwordinput">Password</label>
<div class="control">
<input id="passwordinput" name="passwordinput3" class="input" type="password" />
</div>
</div>
<div class="field">
<label class="label" for="telinput">Telephone</label>
<div class="control">
<input id="telinput" name="telinput3" class="input" type="tel" />
</div>
</div>
<div class="field">
<label class="label" for="urlinput">Website URL</label>
<div class="control">
<input id="urlinput" name="urlinput3" class="input" type="url" />
</div>
</div>
<div class="field">
<label class="label" for="resume">Upload file</label>
<div class="file">
<input class="file-input" type="file" id="resume" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</div>
</div>
</fieldset>
</form>The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.
Each of them should be wrapped in a .control container
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
Use the is-medium or is-large class to create larger input elements.
Use the <label> element to associate text and <input> form control.
Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.
Fieldset and legend should only be used to associate groups of controls when a higher level description is necessary.