Forms - Text Input

Figure 1 Example of text input

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

<form>
    <label for="firstname">First name</label>
    <input type="text" aria-required="true" name="firstname" id="firstname" autocomplete="given-name">

    <label for="lastname">Last name</label>
    <input type="text" aria-required="true" name="lastname" id="lastname" autocomplete="family-name">
</form>

input {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.8rem;
    border: 1px solid #8e8e8e;
    line-height: 1.15;
    width: 40%;
    border-radius: 4px;
}
label{
    font-size:1.1rem;
}
@media screen and (max-width: 600px) {
    input{
        width: 90%;
    }
}