Scribd
Upload
3 views

Officials

Uploaded by

johnalexis.maranan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

Officials

Uploaded by

johnalexis.maranan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<form id="add-official-form" method="POST" enctype="multipart/form-data">

<input type="hidden" name="id" id="official-id" value="">

<!-- Picture Upload Section -->


<div class="picture-section">
<div id="picture-preview" class="picture-preview">
<img id="preview-img" src="images/icons/john-doe-
icon.jpg" alt="Picture Preview">
</div>
<label for="picture">Picture:</label>
<input type="file" id="picture" name="picture"
accept="image/*" onchange="previewImage(event)">
<p style="font-size: 0.9rem;">File size (5MB limit)</p>
</div>

<!-- Form Fields Section -->


<div class="form-section">
<span class="required-asterisk" style="display: inline-
block; text-align: right; width: 100%;">* All Fields are required</span>
<br>

<label for="name">Full Name:</label>


<input type="text" id="name" name="name" required
placeholder="ex. John Doe">

<label for="position">Position:</label>
<select id="position" name="position" required>
<option value="Punong Barangay">Punong
Barangay</option>
<option value="Barangay Kagawad">Barangay
Kagawad</option>
<option value="Barangay Secretary">Barangay
Secretary</option>
<option value="Barangay Treasurer">Barangay
Treasurer</option>
<option value="Lupong Tagapamayapa">Lupong
Tagapamayapa</option>
<option value="SK Chairperson">SK Chairperson</option>
</select>

<label for="birth_date">Birth Date:</label>


<input type="date" id="birth_date" name="birth_date"
required onchange="calculateAge()">

<label for="age">Age:</label>
<input type="number" id="age" name="age" readonly
placeholder="ex. 25">

<label for="sex">Gender:</label>
<select id="sex" name="sex" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>

<label for="civil_status">Civil Status:</label>


<select id="civil_status" name="civil_status" required>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
</select>

<label for="contact_number">Contact Number:</label>


<input type="text" id="contact_number"
name="contact_number" required placeholder="ex. 09XXXXXXXX">

<label for="term_start">Term Start:</label>


<input type="date" id="term_start" name="term_start"
required>

<label for="term_end">Term End:</label>


<input type="date" id="term_end" name="term_end" required>
</div>

<!-- Modal Footer Section for Button -->


<div class="modal-footer">
<button type="button" id="add-official" name="add-
official">Add Official</button>
<button type="button" id="update-official" name="update-
official" style="display: none;">Update</button>
</div>
</form>

You might also like