The text below is selected, press Ctrl+C to copy to your clipboard. (⌘+C on Mac) No line numbers will be copied.
Guest
Javascript form
By Guest on 7th February 2019 12:38:34 PM | Syntax: TEXT | Views: 1



New paste | Download | Show/Hide line no. | Copy text to clipboard
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4.   input[type=text],
  5.   select {
  6.     width: 100%;
  7.     padding: 12px 20px;
  8.     margin: 8px 0;
  9.     display: inline-block;
  10.     border: 1px solid #ccc;
  11.     border-radius: 4px;
  12.     box-sizing: border-box;
  13.   }
  14.  
  15.   input[type=button] {
  16.     width: 49%;
  17.     background-color: #4CAF50;
  18.     color: white;
  19.     padding: 14px 20px;
  20.     margin: 8px 0;
  21.     border: none;
  22.     border-radius: 4px;
  23.     cursor: pointer;
  24.   }
  25.  
  26.   input[type=submit]:hover {
  27.     background-color: #45a049;
  28.   }
  29.  
  30.   div {
  31.     border-radius: 5px;
  32.     background-color: #f2f2f2;
  33.     padding: 20px;
  34.   }
  35. </style>
  36.  
  37. <body>
  38.  
  39.   <div>
  40.     <form name="myForm">
  41.       <label for="fname">First Name</label>
  42.       <input type="text" id="fname" name="firstname" placeholder="Your name..">
  43.  
  44.       <label for="lname">Last Name</label>
  45.       <input type="text" id="lname" name="lastname" placeholder="Your last name..">
  46.  
  47.  
  48.       <input type="button" value="Submit" OnClick="return showResult()">
  49.       <input type="button" value="Clear Result" OnClick="return clearresult()">
  50.     </form>
  51.   </div>
  52.   <div style="background-color:lightblue" id="output">
  53.     <b>First Name</b>&nbsp;&nbsp;<span id="fn"></span>
  54.     <br>
  55.     <b>Last Name</b>&nbsp;&nbsp;<span id="ln"></span>
  56.   </div>
  57.   <script>
  58.   document.getElementById("output").style.display = "none";
  59.     function showResult() {
  60.       document.getElementById("output").style.display = "block";
  61.       document.getElementById("fn").innerHTML = document.forms["myForm"]["fname"].value;
  62.       document.getElementById("ln").innerHTML = document.forms["myForm"]["lname"].value;
  63.     }
  64.     function clearresult() {
  65.       document.getElementById("fn").innerHTML = "";
  66.       document.getElementById("ln").innerHTML = "";
  67.       document.getElementById("output").style.display = "none";
  68.     }
  69.   </script>
  70.  
  71. </body>
  72.  
  73. </html>



  • Recent Pastes