|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <!DOCTYPE html>
- <html lang="en-PH">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <article>
- <h2></h2>
- <form>
- <div>
- <input type="text" placeholder="First Name" name="first_name" />
- </div>
- <div>
- <input type="text" placeholder="Middle Name" name="middle_name" />
- </div>
- <div>
- <input type="text" placeholder="Last Name" name="last_name" />
- </div>
- <fieldset>
- <legend>Gender</legend>
- <div>
- <label>
- <input type="radio" name="gender" value="m" />
- Male
- </label>
- <label>
- <input type="radio" name="gender" value="f" />
- Female
- </label>
- </div>
- </fieldset>
- <div>
- <select name="civil_status">
- <option value="">Select Civil Status</option>
- <option value="single">Single</option>
- <option value="married">Married</option>
- <option value="divorced">Divorced</option>
- <option value="separated">Separated</option>
- </select>
- </div>
- <div>
- <label>
- <input type="checkbox" name="new_registration" />
- New Registration
- </label>
- </div>
- <div>
- <label>
- <input type="checkbox" value="filipino" name="nationality" />
- Filipino
- </label>
- </div>
- <fieldset>
- <legend>
- Default Dependents
- </legend>
- <div>
- <label>
- <input type="radio" value="James" name="dependent" />
- James
- </label>
- <label>
- <input type="radio" value="Jun" name="dependent" />
- Jun
- </label>
- </div>
- </fieldset>
- <div>
- <button type="button" class="dependents">
- Add Dependents
- </button>
- </div>
- <div>
- <textarea name="notes" placeholder="Notes"></textarea>
- </div>
- <div>
- <button name="submit" value="Hello" type="submit">Hello</button>
- <button name="submit" value="Hi" type="submit">Hi</button>
- </div>
- </form>
- </article>
- <script>
- Array.from(document.getElementsByClassName('dependents')).forEach(d => {
- d.addEventListener('click', e => {
- const container = document.createElement('div')
- const input = document.createElement('input')
- input.name = 'dependent'
- input.type = 'text'
- input.placeholder = 'Dependent'
- container.classList.add('additional-dependent')
- container.appendChild(input)
- e.target.parentElement.parentElement.insertBefore(container, e.target.parentElement)
- })
- })
- </script>
- </body>
- </html>
|