Textfield

Simple textfield

<form class="custom-drupal-form" accept-charset="UTF-8">
  <div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name">
    <label for="edit-name" class="js-form-required form-required">Textfield label</label>
    <input type="text" id="edit-name" name="name" value="" size="60" maxlength="60" class="form-text required form-control" required="required" aria-required="true">
  </div>
  <div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name-disabled form-item-name-disabled form-disabled">
    <label for="edit-name-disabled">Disabled textfield</label>
    <input type="text" id="edit-name-disabled" name="name-disabled" value="" size="60" maxlength="60" class="form-text required form-control" disabled>
  </div>
</form>

 

Textfield with Description

Enter your International Foundation for Electoral Systems username.
<form class="custom-drupal-form" accept-charset="UTF-8">
  <div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name">
    <label for="edit-name-description" class="js-form-required form-required">Textfield label</label>
    <input type="text" id="edit-name-description" name="name" value="" size="60" maxlength="60" class="form-text required form-control" required="required" aria-required="true">
    <small id="edit-name--description" class="form-text text-muted description">Enter your International Foundation for Electoral Systems username.</small>
  </div>
</form>

 

No label textfield

<form class="custom-drupal-form" accept-charset="UTF-8">
  <div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name">
    <label for="edit-name-no-label" class="js-form-required visually-hidden">Textfield label</label>
    <input type="text" id="edit-name-no-label" name="name" value="" size="60" maxlength="60" class="form-text required form-control">
  </div>
</form>

 

Form Element: Text field

This is a description for this field
This is a description for this field
This is a description for this field
<form class="themeguide-test-form" data-drupal-selector="themeguide-test-form" action="/themeguide/forms/textfield" method="post" id="themeguide-test-form" accept-charset="UTF-8">
  <div class="form-group js-form-item form-item js-form-type-email form-type-email js-form-item-email form-item-email mb-100">
      <label for="edit-email" class="form-label">E-mail</label>
        <input data-drupal-selector="edit-email" aria-describedby="edit-email--description" type="email" id="edit-email" name="email" value="[email protected]" size="60" maxlength="254" placeholder="[email protected]" class="form-email form-control" />

                <small id="edit-email--description" class="form-text text-muted description mt-050 d-inline-block">
        This is a description for this field
      </small>
      </div>
<div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-textfield form-item-textfield mb-100">
      <label for="edit-textfield" class="form-label">Textfield</label>
        <input data-drupal-selector="edit-textfield" aria-describedby="edit-textfield--description" type="text" id="edit-textfield" name="textfield" value="Default value" size="60" maxlength="128" placeholder="Initial placeholder" class="form-text form-control" />

                <small id="edit-textfield--description" class="form-text text-muted description mt-050 d-inline-block">
        This is a description for this field
      </small>
      </div>
<div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-textfield-required form-item-textfield-required mb-100">
      <label for="edit-textfield-required" class="js-form-required form-required form-label">Required Textfield</label>
        <input data-drupal-selector="edit-textfield-required" aria-describedby="edit-textfield-required--description" type="text" id="edit-textfield-required" name="textfield_required" value="Default value" size="60" maxlength="128" class="form-text required form-control" required="required" aria-required="true" />

                <small id="edit-textfield-required--description" class="form-text text-muted description mt-050 d-inline-block">
        This is a description for this field
      </small>
      </div>
<div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-textfield-disabled form-item-textfield-disabled form-disabled mb-100">
      <label for="edit-textfield-disabled" class="form-label">Disabled Textfield</label>
        <input data-drupal-selector="edit-textfield-disabled" aria-describedby="edit-textfield-disabled--description" disabled="disabled" type="text" id="edit-textfield-disabled" name="textfield_disabled" value="Default value" size="60" maxlength="128" class="form-text form-control disabled-input" />

                <small id="edit-textfield-disabled--description" class="form-text text-muted description mt-050 d-inline-block">
        This is a description for this field
      </small>
      </div>
<input autocomplete="off" data-drupal-selector="form-f2flgm6ii-r-5mfr7xsooani1gjfpofyhpftqonwigi" type="hidden" name="form_build_id" value="form-F2flGm6Ii_R_5mfr7xSooani1GjFpofyHPfTQoNWigI" />
<input data-drupal-selector="edit-themeguide-test-form" type="hidden" name="form_id" value="themeguide_test_form" />
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Submit" class="button button--primary js-form-submit form-submit btn btn-primary" />
</div>

</form>

Form Element: Textfield with inline submit button

<form class="themeguide-test-form" data-drupal-selector="themeguide-test-form-2" action="/themeguide/forms/textfield" method="post" id="themeguide-test-form--2" accept-charset="UTF-8">
  <div class="form-group js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-textfield form-item-textfield form-no-label form-no-input-label form-no-description mb-100">
      <label for="edit-textfield--2" class="visually-hidden js-form-required form-required form-label">E-mail</label>
        <input data-drupal-selector="edit-textfield" type="text" id="edit-textfield--2" name="textfield" value="[email protected]" size="60" maxlength="128" class="form-text required form-control" required="required" aria-required="true" />

            </div>
<input autocomplete="off" data-drupal-selector="form-tt-fhdlwkcxlml3dkdog1rjz7xesl80fut5p3p0i7x4" type="hidden" name="form_build_id" value="form-TT_FHDLWKcxLmL3dkDog1Rjz7XESL80fUT5p3p0i7X4" />
<input data-drupal-selector="edit-themeguide-test-form-2" type="hidden" name="form_id" value="themeguide_test_form" />
<div class="actions-inline form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions--2"><input data-drupal-selector="edit-submit" type="submit" id="edit-submit--2" name="op" value="Submit" class="button button--primary js-form-submit form-submit btn btn-primary" />
</div>

</form>