JSFiddle - React, Tailwind, and code Playground

by ilyasahmed195

HTML

<html>
<head>
<div id="Cash Claim Submission Forh">
    <h1 title="Cash  Claim Submission  Form">Cash Claim Submission Form</h1><p></P>

<body>
<form action="<?php print $PHP_SELF?>" enctype="multipart/form-data" method="post">
    
        <input type="text" size=30 data-hint="Enter your Relation Number" />
<input type="text" data-hint="Enter your E-mail Here" /><p></p>
<select name="Select your Policy Number" onchange='checkvalue(this.value)'> 
    <option>Select your Policy Number</option>  
    <option value="Trade Union Coop ins Co">Trade Union Coop ins Co</option>
    <option value="RSA-Al Alaimiya Co">RSA-Al Alaimiya Co</option>
    <option value="Gulf General Coop ins Co">Gulf General Coop ins Co</option>
      <option value="ACE Coop ins Co">ACE Coop ins Co</option>
         <option value="Buruj Coop ins Co">Buruj Coop ins Co</option>
</select> 
<select name="" onchange='checkvalue(this.value)'> 
    <option> </option>  
    <option value="41">41</option>
    <option value="42">42</option>
    <input type="text" data-hint="MED" />
   
    <select name="" onchange='checkvalue(this.value)'> 
    <option> </option>  
    <option value="2011">2011</option>
    <option value="2012">2012</option>
 <input type="text" data-hint="Policy Serial" />
        <Select name="Select Country of Treatment"on change='checkvalue(this.value)'>
<option value="Select Country of Treatment">Select Country Of Treatment</option>
  <option value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  <option value="AS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option value="AU">Australia</option>
  <option value="AT">Austria</option>
 ...

CSS

form {
  background-color : #C0C0C0;
}
form

form {
  border : 1px solid #000;
  padding : 5px;
}
input {
  background-color :#C0C0C0 ;
  color : #000000;
}
input.submit {
  background-color : #C0C0C0;
  color : #C0C0C0;
  font : bold 14px/14px verdana, geneva, helvetica;
  border : 2px solid #C0C0C0;
}
.bright {
  color : #c00;
  font : bold 12px/12px verdana, geneva, helvetica;
}
input.bright {
  border : 1px solid #c00;
}
.faded {
  color : #ccc;
  font : normal 12px/12px verdana, geneva, helvetica;
}
input.faded {
  border : 1px solid #ccc;
}

JavaScript

var inputElements = document.getElementsByTagName("input");
for (var i=0; i < inputElements.length; i++) {
    if (inputElements[i].type == 'text') {
        inputElements[i].value = '';
    }
}



var inputs = document.getElementsByTagName('input');

for (i=0; i<inputs.length; i++){
    if (inputs[i].hasAttribute('data-hint')){
        inputs[i].value = inputs[i].getAttribute('data-hint');
            inputs[i].style.color = '#999';
        
        inputs[i].onclick = function(){
            this.value = '';
        };
        inputs[i].onblur = function(){
            if (this.value == '' || this.value == this.getAttribute('data-hint')){
                this.value = this.getAttribute('data-hint');
                this.style.color = '#000';
            }
        };
    }
}