Textfield
Documentation
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
<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
<form class="themeguide-test-form" data-drupal-selector="themeguide-test-form" action="/ar/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-d14gpgxajbxeekjsn-ryekistmiftpv0llmopumoq8" type="hidden" name="form_build_id" value="form-_D14GPgxajBXeeKjsn_rYeKIsTmiftpv0LlMoPumoQ8" />
<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="/ar/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-rqb16546de4qyws-ei1brwknroofe-d1dbmxvaqybti" type="hidden" name="form_build_id" value="form-rQb16546de4QYwS-ei1BRwKNROOFE-D1dBMXvaQYBtI" />
<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>