Required Validation

by Pratik Bhoir

HTML

<html><head>
<meta charset="UTF-8">
<title>Inline Live Demo: Required Attribute</title>
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.2em;
}
.star {
	color:#b30000;
}
label {
	display:block;
}
.inline {
	display:inline;
}
.instructions {
	position:relative;
	top: 1.6em;
	display:block;
}
.instructions-container {
	margin-bottom:2em;
}
.instructions-container label {
	margin-bottom:-1.2em;
}
.hidden {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.clipart {
	padding: 1em;
}
/* save for later
input:invalid { 
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red; 
 -webkit-box-shadow: 0px 0px 5px red; 
         box-shadow: 0px 0px 5px red;
}
*/
td.center {
	text-align: center;
}
table {
	border:1;
	border-collapse:collapse;
}
.right {
	text-align:right;
}
</style>
</head>

<body marginwidth="0" marginheight="0">
<form name="form1" method="post" action="">
  <p>
    <label for="lname">Last Name <span class="star">*</span></label>
    <input type="text" name="lname" id="lname" required="">
  </p>
  <p>
    <input type="checkbox" name="tos" id="tos" required="">
    <label for="tos" class="inline"><span class="star">*</span> I agree to terms of service.</label>
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="Test Required Attribute">
  </p>
</form>


</body></html>