HTML + PHP Web Forms

By

html-php

View Slides

Download Html Forms exercises files

Download Html Forms finished from class

( Tuesday March 15th )

 

In the example bellow there is some simple HTML to crate a web form for capturing data.

Basic Form Markup

 <form id="myform" name="theform" method="POST" 
 action="<?php echo $_SERVER['PHP_SELF']?>" class="clearfix">
    <br>
   <label for="textfield">Name</label>
   <input type="text" name="senderName" placeholder="first, last">
    <br>

   <label for="emailfield">Email</label>
   <input type="email" name="senderEmail" placeholder="example@host.com" >
    <br>

  <label for="messagefield">Message</label>
  <textarea name="message" placeholder="hello..." >
  </textarea>
   <br>

 <button class="btn btn-block btn-default" 
 type="submit" name="action" value="submit">Send</button>
 
 </form>

The basic example above has only the bare minimum to create a working contact form on a web page. It will work but it’s functional is somewhat limited, for example there is no form validation ( code to make sure people put an email in the email field ). It also won’t look very presentable in the browser. The example bellow has some additional mark up for in browser form validation ( see the patter, and required attributes in the input tags) and for presentation see the additional classes and div tags.

Contact Form with layout and validation markup

<form id="myform" name="theform" method="POST" action="<?php echo $_SERVER['PHP_SELF']?>" class="clearfix">

  <div id="textfield" class="input-group"> 
   <label class="input-group-addon" for="textfield">Name</label>
   <input class="form-control" type="text" name="senderName" autofocus required placeholder="first, last" value="" pattern="[A-Za-z ]+[A-Za-z ]">
 </div> 

  <div id="emailfield" class="input-group"> 
   <label class="input-group-addon" for="emailfield">Email</label>
   <input class="form-control" type="email" name="senderEmail" required placeholder="example@host.com" >
 </div>


  <div id="messagefield" class="input-group"> 
   <label class="input-group-addon" for="messagefield">Message</label>
   <textarea class="form-control" name="message" required placeholder="hello..." >
   </textarea>
  </div>

  <div class="btn-wraper">
   <button class="btn btn-block btn-default" type="submit" name="action" value="submit">Send</button>
  </div>

</form>

Leave a Reply