API tools faq
paste
martinms

Berbagai Macam Input Formulir

martinms
Jul 8th, 2021 (edited)
340
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <title>Berbagai Macam Input Formulir</title>
  6.  
  7.   <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
  8.   <style>
  9.     body {
  10.       font-family: 'PT Sans', sans-serif;
  11.       padding: 50px 20px 0;
  12.     }
  13.  
  14.     .formulir {
  15.       width: 65%;
  16.       margin: 0 auto;
  17.       padding: 15px;
  18.       box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  19.       border-radius: 10px;
  20.     }
  21.  
  22.     .formulir .title {
  23.       font-weight: bold;
  24.       border-bottom: 2px solid #ddd;
  25.       margin-bottom: 20px;
  26.       font-size: 22px;
  27.       padding-bottom: 3px;
  28.     }
  29.  
  30.     .formulir form {
  31.       margin-top: 30px;
  32.     }
  33.  
  34.     .formulir .input-data {
  35.       margin-bottom: 1rem;
  36.     }
  37.  
  38.     .formulir .input-data label span:not(.required) {
  39.       width: 250px;
  40.       font-weight: 500;
  41.       float: left;
  42.       padding-top: 4px;
  43.       padding-right: 5px;
  44.     }
  45.  
  46.     .formulir .input-data input:not([type=radio], [type=checkbox]),
  47.     .formulir .input-data textarea,
  48.     .formulir .input-data select {
  49.       width: 50%;
  50.       box-sizing: border-box;
  51.       border: 1px solid #c2c2c2;
  52.       box-shadow: 1px 1px 4px #EBEBEB;
  53.       border-radius: 3px;
  54.       padding: 7px;
  55.       outline: none;
  56.     }
  57.  
  58.     .formulir .input-data .radio {
  59.       width: 50%;
  60.     }
  61.  
  62.     .formulir .input-data .radio label {
  63.       display: block;
  64.     }
  65.  
  66.     .formulir .input-data .radio input {
  67.       border: 1px solid #0c0;
  68.     }
  69.  
  70.     .formulir .input-data input:focus {
  71.       border: 1px solid #0c0
  72.     }
  73.  
  74.     .formulir .input-data label span .required {
  75.       color: red;
  76.     }
  77.  
  78.     .formulir .button {
  79.       text-align: center;
  80.     }
  81.  
  82.     .formulir .button input {
  83.       border: none;
  84.       padding: 8px 15px 8px 15px;
  85.       background: #FF8500;
  86.       color: #fff;
  87.       box-shadow: 1px 1px 4px #DADADA;
  88.       border-radius: 3px;
  89.     }
  90.  
  91.     .formulir .button input:hover {
  92.       background: #EA6B00;
  93.       color: #fff;
  94.     }
  95.  
  96.     .footer {
  97.       text-align: center;
  98.       margin: 25px 0;
  99.     }
  100.   </style>
  101. </head>
  102.  
  103. <body>
  104.   <div class="formulir">
  105.     <div class="title">Berbagai Macam Input Formulir</div>
  106.  
  107.     <form action="#" method="post" enctype="multipart/form-data">
  108.       <input type="hidden" name="nggak_keliatan" value="000">
  109.  
  110.       <div class="input-data">
  111.         <label for="field1">
  112.           <span>Input Text</span>
  113.         </label>
  114.         <input type="text" id="field1" placeholder="Sebuah input teks (ini adalah placeholder)">
  115.       </div>
  116.  
  117.       <div class="input-data">
  118.         <label for="field19">
  119.           <span>Input Text (harus diisi)<span class="required">*</span></span>
  120.         </label>
  121.         <input type="text" id="field19" required>
  122.       </div>
  123.  
  124.       <div class="input-data">
  125.         <label for="field20">
  126.           <span>Input Text Disabled (tidak bisa diisi)</span>
  127.         </label>
  128.         <input type="text" id="field20" value="Teks ini tidak bisa di edit" readonly>
  129.       </div>
  130.  
  131.       <div class="input-data">
  132.         <label for="field2">
  133.           <span>Input Password</span>
  134.         </label>
  135.         <input type="password" id="field2">
  136.       </div>
  137.  
  138.       <div class="input-data">
  139.         <label for="field3">
  140.           <span>Input File</span>
  141.         </label>
  142.         <input type="file" name="" id="field3">
  143.       </div>
  144.  
  145.       <div class="input-data">
  146.         <label for="field15">
  147.           <span>Input Textarea</span>
  148.         </label>
  149.         <textarea id="field15"></textarea>
  150.       </div>
  151.  
  152.       <div class="input-data">
  153.         <label for="field16">
  154.           <span>Input Select</span>
  155.         </label>
  156.         <select id="field16">
  157.           <option>Pilihan 1</option>
  158.           <option>Pilihan 2</option>
  159.           <option>Pilihan 3</option>
  160.         </select>
  161.       </div>
  162.  
  163.       <div class="input-data">
  164.         <label>
  165.           <span>Input Radio</span>
  166.         </label>
  167.  
  168.         <div class="radio">
  169.           <label for="field17">
  170.             <input type="radio" name="pilihan" value="1" id="field17"> Pilihan 1
  171.           </label>
  172.           <label for="field18">
  173.             <input type="radio" name="pilihan" value="2" id="field18"> Pilihan 2
  174.           </label>
  175.         </div>
  176.       </div>
  177.  
  178.       <div class="input-data">
  179.         <label>
  180.           <span>Input Checkbox</span>
  181.         </label>
  182.  
  183.         <div class="radio">
  184.           <label for="field21">
  185.             <input type="checkbox" name="boxs[]" value="1" id="field21"> Pilihan 1
  186.           </label>
  187.           <label for="field22">
  188.             <input type="checkbox" name="boxs[]" value="2" id="field22"> Pilihan 2
  189.           </label>
  190.         </div>
  191.       </div>
  192.  
  193.       <div class="input-data">
  194.         <label for="field4">
  195.           <span>Input Email</span>
  196.         </label>
  197.         <input type="email" id="field4">
  198.       </div>
  199.  
  200.       <div class="input-data">
  201.         <label for="field5">
  202.           <span>Input Number (Angka)</span>
  203.         </label>
  204.         <input type="number" id="field5">
  205.       </div>
  206.  
  207.       <div class="input-data">
  208.         <label for="field6">
  209.           <span>Input URL</span>
  210.         </label>
  211.         <input type="url" id="field6">
  212.       </div>
  213.  
  214.       <div class="input-data">
  215.         <label for="field7">
  216.           <span>Input Telpon</span>
  217.         </label>
  218.         <input type="tel" id="field7" pattern="[0-9]{5}-[0-9]{4}-[0-9]{4}">
  219.       </div>
  220.  
  221.       <div class="input-data">
  222.         <label for="field8">
  223.           <span>Input Date</span>
  224.         </label>
  225.         <input type="date" id="field8">
  226.       </div>
  227.  
  228.       <div class="input-data">
  229.         <label for="field9">
  230.           <span>Input Time</span>
  231.         </label>
  232.         <input type="time" id="field9">
  233.       </div>
  234.  
  235.       <div class="input-data">
  236.         <label for="field10">
  237.           <span>Input Date-Time</span>
  238.         </label>
  239.         <input type="datetime-local" id="field10">
  240.       </div>
  241.  
  242.       <div class="input-data">
  243.         <label for="field11">
  244.           <span>Input Minggu</span>
  245.         </label>
  246.         <input type="week" id="field11">
  247.       </div>
  248.  
  249.       <div class="input-data">
  250.         <label for="field12">
  251.           <span>Input Bulan</span>
  252.         </label>
  253.         <input type="month" id="field12">
  254.       </div>
  255.  
  256.       <div class="input-data">
  257.         <label for="field13">
  258.           <span>Input Kode Warna</span>
  259.         </label>
  260.         <input type="color" id="field13">
  261.       </div>
  262.  
  263.       <div class="input-data">
  264.         <label for="field14">
  265.           <span>Input Search</span>
  266.         </label>
  267.         <input type="search" id="field14">
  268.       </div>
  269.  
  270.       <div class="input-data">
  271.         <label for="field23">
  272.           <span>Input Range</span>
  273.         </label>
  274.         <input type="range" id="field23">
  275.       </div>
  276.  
  277.       <div class="button">
  278.         <input type="button" value="Hanya Tombol Biasa">
  279.         <input type="submit" value="Ini Tombol Submit">
  280.         <input type="reset" value="Tombol Reset">
  281.       </div>
  282.     </form>
  283.   </div>
  284.   <div class="footer">
  285.     &copy; 2021 Menuju KP
  286.   </div>
  287. </body>
  288.  
  289. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!