title: Email formatting on a Bootstrap 5 form
body: <p>This is my 1st Bootstrap effort, so please bear with me.  If this has already been addressed somewhere else, I haven't found it, and a polite pointer would be appreciated.</p>
  <p>I am trying to create a Bootstrap 5 form that will run on a Raspberry Pi with no connection to the Internet.  I have downloaded the Bootstrap-5.2.0-dist kit to my system and the CSS controls appear to be generally working as described.</p>
  <p>I need to do some client side validation to ensure the form is filled out correctly when the Submit button is pressed, or preferably when another input control on the form is selected. As a starting point, I trying to figure out how to make the email address checking work and I seem to be missing something basic.</p>
  <p>What do I have to add so that the email field will be evaluated as a properly formatted email address?</p>
  <p>Here is my code...</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Create&lt;/title&gt;
      &lt;link 
        href=&quot;/home/ko2f/eHaW/bootstrap-5.2.0-dist/css/bootstrap.min.css&quot; 
        rel=&quot;stylesheet&quot; 
      /&gt;
      &lt;script src=&quot;/home/ko2f/eHaW/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div class=&quot;container-fluid p-3 bg-primary text-white text-center&quot;&gt;
        &lt;h4&gt;Emergency Message Service&lt;/h4&gt;
        &lt;h1&gt;Create Message&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;form&gt;
        &lt;div class=&quot;form-group mb-3 mt-3&quot;&gt;
          &lt;label for=&quot;text&quot; class=&quot;control-label&quot;&gt;From:&lt;/label&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;from&quot; 
                 placeholder=&quot;Enter your name&quot; name=&quot;from&quot; required /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group mb-3 mt-3&quot;&gt;
          &lt;label for=&quot;email&quot; class=&quot;control-label&quot;&gt;To:&lt;/label&gt;
          &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; 
                 placeholder=&quot;Enter email address&quot; name=&quot;email&quot; required /&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group mb-3 mt-3&quot;&gt;
          &lt;label for=&quot;msg&quot; class=&quot;control-label&quot;&gt;Message:&lt;/label&gt;
          &lt;input type=&quot;msg&quot; class=&quot;form-control&quot; rows=&quot;10&quot; id=&quot;msg&quot; 
                 placeholder=&quot;Enter the message you want to send here...&quot; name=&quot;msg&quot; required /&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;div class=&quot;mx-auto&quot; style=&quot;width:350px&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success&quot;&gt;Submit&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot;&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Thank you for considering my question...
  Bob Segrest</p>