You are on page 1of 3

Lab Task 5

Muhammad Adam Bin Syahroel Azmir

Am2107009545

Output
Code

<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title>
Booking Form
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div class="ion-padding">

<ion-text color="primary">
<p>Please fill up enquiry and we will be in touch with you soon</p>
</ion-text>

<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input type="text" required></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input type="email" placeholder="your@gmail.com" required></ion-
input>
</ion-item>

<ion-item>
<ion-label position="floating">Telephone number</ion-label>
<ion-input type="email" placeholder="0123456789" required></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Date</ion-label><br>
<ion-input type="date" required></ion-input>
</ion-item>

<ion-item>
<ion-label>Type</ion-label>
<ion-select value="General" okText="Okay" cancelText="Dismiss">
<ion-select-option value="General"></ion-select-option>
<ion-select-option value="Quotation">Fee</ion-select-option>
<ion-select-option value="Complaint">Contact</ion-select-option>
<ion-select-option value="Others">Others</ion-select-option>
</ion-select>
</ion-item>

<ion-button expand="block" color="primary">


<ion-icon slot="start" name="send"></ion-icon>
Send
</ion-button>
</div>
</ion-content>

You might also like