<commit_before>---
title: Forms
description: |
  Form elements and interactive components for inputting data into the
  system.
usage: |
  Use input fields in any case where the user will be entering or defining
  information, such as short text, a password, or choosing a spefic item
  from a list of options. Input fields labels should be used for all forms.
  Labels are important not only to ensure that each field is clearly
  identified, but also to ensure accessibility as labels are crucial for
  screen readers and other accessibility tools.
notes: |
  Input fields should be sized based on the length of entry, rather than
  trying to make each input the same length. A ZIP code field, for
  instance, should be smaller than a street address field, as one is known
  to be 5 characters while the other could be much longer.
---
<h3 class="guide-subsection-title">Label <small>with placholder text</small></h3>
<div class="guide-example">
  <div class="form-group">
    <label for="text1">State</label>
    <input type="text" class="form-control" id="text1" placeholder="">
  </div>
</div>
<code class="language-markup"><commit_msg>fixing typo and example placeholder<commit_after>---
title: Forms
description: |
  Form elements and interactive components for inputting data into the
  system.
usage: |
  Use input fields in any case where the user will be entering or defining
  information, such as short text, a password, or choosing a spefic item
  from a list of options. Input fields labels should be used for all forms.
  Labels are important not only to ensure that each field is clearly
  identified, but also to ensure accessibility as labels are crucial for
  screen readers and other accessibility tools.
notes: |
  Input fields should be sized based on the length of entry, rather than
  trying to make each input the same length. A ZIP code field, for
  instance, should be smaller than a street address field, as one is known
  to be 5 characters while the other could be much longer.
---
<h3 class="guide-subsection-title">Label <small>with placeholder text</small></h3>
<div class="guide-example">
  <div class="form-group">
    <label for="text1">State</label>
    <input type="text" class="form-control" id="text1" placeholder="Enter a State">
  </div>
</div>
<code class="language-markup">
{'fraction_non_alphanumeric': 0.07937877480586712, 'fraction_numerical': 0.004314063848144953, 'mean_word_length': 4.234762979683973, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2955761', 'n_tokens_mistral': 619, 'n_tokens_neox': 607, 'n_words': 317}