A field for entering an email address.
How to use this component
This element should be used for adding an email address field to a form.
We use type=”email” to present a keyboard more suitable for entering email addresses on mobile devices. The browser will also provide some validation for us. You should also perform server side validation to make sure a valid email address was entered.
The autocomplete attribute can be used to automatically populate the field with a value. For example, completing the email field with the value saved in the users browser.
The aria-label can also be used to provide a more desciptive label for screen readers if a normal label cannot be used, or is not descriptive enough.
Code Resource
<label for="email" class="form_formLabelTitle">Email *</label>
<input name="email" type="email" id="email" class="form_formTextbox" autocomplete="email" title="Enter your email address">/* Input Fields and Label*/
.form_formTextbox {
width: 100%;
font-size: medium;
margin-bottom: 15px;
float: right;
display: block;
border-radius: 0px;
border: 1px solid silver;
padding: 2px 5px;
border-radius: 6px;
height: 49px;
text-indent: 10px;
}
.form_formTextbox:hover, .form_formTextbox:focus {
border: 1px solid #015b66;
background: #f9f9f9;
outline: none;
}
.form_formLabelTitle {
width: 100%;
font-size: 1em;
color: black;
float: left;
text-align: left;
padding: 7px;
padding-left: 0px;
}
/* END */