HTML5 in 24 Hours

Hour 18 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

· 3 min read

Hour 18 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 18.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Form</title>
<style>
fieldset {
  width: 50%;
  max-width: 400px;
  background-color: #EDEE6A;
  margin: 0 auto;
}
legend {
  font-size: 18px;
  font-family: sans-serif;
}
input {
  display: block;
  width: 80%;
  font-size: 18px;
  margin: 0 auto 1em auto;
}
input\[type=submit\] {
  width: 40%;
}
label {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
</style>
</head>

<body>
<form id="loginForm" novalidate>
  <fieldset>
    <legend>Login</legend>
    <label for="usernaame">Username:</label><input type="email" placeholder="Username or Email Address" id="username">
    <label for="password">Password:</label><input type="password" placeholder="Password" id="password">
    <input type="submit" value="Go!" id="submit">
  </fieldset>
</form>
</body>
</html>

Listing 18.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLJenn Contact Form</title>

<style>

</style>
<link href="rwd code 18.3.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>

<body>
<h1>Contact HTMLJenn</h1>
<form>
  <article>
  <section id="mainform">
    <h2>Contact Information</h2>
    <label for="name" class="inputbox">Your Name</label>
    <input id="name" placeholder="Your Name" required class="inputbox" autofocus>
    
    <label for="email" class="inputbox">Your Email Address</label>
    <input id="email" type="email" placeholder="Your Email Address" required class="inputbox">
    
    <label for="url" class="inputbox">Your Website URL</label>
    <input id="url" type="url" placeholder="Your Website URL" class="inputbox">
    
    <label for="phone" class="inputbox">Your Phone Number</label>
    <input id="phone" type="tel" placeholder="Your Phone Number" class="inputbox">
  </section>
  <section id="messagearea">
    <h2>Share Your Thoughts</h2>
    <textarea id="message" placeholder="Your Thoughts" required class="inputbox"></textarea>
  </section>
  </article>
  <aside class="clearfix">
  <section id="messageabout">
    <h2> This Message Is About</h2>
    <select id="msgAbt" required class="inputbox">
      <option selected></option>
      <option>Writing Opportunity</option>
      <option>Web Design Opportunity</option>
      <option>Consulting Opportunity</option>
      <option>Collaboration Opportunity</option>
      <option value="article">Article Correction</option>
      <option value="other">Other</option>
    </select>
    
    <label for="article-url" class="inputbox hide">URL that needs correction</label>
    <input id="article-url" type="url" placeholder="URL that needs correction" class="inputbox hide">
    
    <label for="other" class="inputbox hide">What is this message about?</label>
    <input id="other" placeholder="what is this message about? (200 characters or less)" maxlength="200" class="inputbox hide">
  </section>
  <section id="messagepriority">
    <h2>Message Priority</h2>
    <p><input type="radio" name="priority" id="high" value="high">
    <label for="high" class="radio">High</label></p>
    <p><input type="radio" name="priority" id="medium" value="medium" checked>
    <label for="medium" class="radio">Medium</label></p>
    <p><input type="radio" name="priority" id="low" value="low">
    <label for="low" class="radio">Low</label></p>
  </section>
  </aside>
  <section id="submitmessage">
    <input type="reset" value="Reset">
    <input type="submit" value="Submit">
  </section>

</form>
<script src="rwd code 18.4.js"></script>
</body>
</html>

Listing 18.3

/\* very basic reset \*/
\*, \*:before, \*:after { 
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

/\* most form elements should take up the whole screen \*/
.inputbox, select, textarea {
  display: block;
  width: 100%;
}
form { max-width: 1000px; }
h1, h2, h3, label { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
section { margin-bottom: 1em; }
input, textarea, select {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-size: 1rem;
  border: solid 0.25em #b4cebc;
  margin-bottom: 1em;
  padding: 0.2em;
  -webkit-box-shadow: 3px 3px 15px #B4CEBC;
  box-shadow: 3px 3px 15px #B4CEBC;
}
input, textarea { max-width: 600px; }
select { max-width: 300px; }
\[required\]:focus {
  border: 0.25em solid #026F23;
}
aside h2, aside select { 
  font-size: medium; 
}
/\* hide aside from smallest browsers \*/
aside { display: none; }
@media (min-width: 480px) {
  aside { display: block; }
  form {
    padding: 0.5em; 
  }
}
@media (min-width: 768px) {
  article {
    width: 60%;
    float: left;
  }
  aside {
    width: 35%; 
    float: right;
  }
  label.inputbox {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  #submitmessage { clear: both; }
}

Listing 18.4

// JavaScript Document

$( document ).ready(function() {
  $("#article-url").hide();
  $("#other").hide();
  $('#msgAbt').change(function() {
    var selected = $(this).val();
    if(selected == 'article'){
      $('#article-url').show();
      $('other').hide();
    }
    else if (selected == 'other') {
      $("#other").show();
      $("#article-url").hide();
    }
    else {
      $('#article-url').hide();
      $('#other').hide();
    }
  });
});