projecte_ionic_entrega_02/src/app/pages/form/form.page.html

55 lines
2.2 KiB
HTML
Executable File

<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Form Page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-label for="countryName">Country Name:</ion-label><br>
<ion-input [(ngModel)]="countryName" type="text"></ion-input><br><br>
<ion-label for="countryContinent">Continent:</ion-label><br>
<ion-item>
<ion-select [(ngModel)]="countryContinent" interface="popover" placeholder="Select">
<ion-select-option value="africa">Africa</ion-select-option>
<ion-select-option value="antarctica">Antarctica</ion-select-option>
<ion-select-option value="asia">Asia</ion-select-option>
<ion-select-option value="europe">Europe</ion-select-option>
<ion-select-option value="northAmerica">North America</ion-select-option>
<ion-select-option value="southAmerica">South America</ion-select-option>
<ion-select-option value="oceania">Oceania</ion-select-option>
</ion-select>
</ion-item><br><br>
<ion-label for="countryArea">Surface Area (km2):</ion-label><br>
<ion-input [(ngModel)]="countryArea" type="text"></ion-input><br><br>
<ion-label for="countryPopulation">Population</ion-label><br>
<ion-input [(ngModel)]="countryPopulation" type="text"></ion-input><br><br>
<ion-label for="countryDrivingSide">Driving Side:</ion-label><br>
<ion-radio-group [(ngModel)]="countryDrivingSide">
<ion-item>
<ion-label>Right</ion-label>
<ion-radio slot="start" color="success" value="right"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Left</ion-label>
<ion-radio slot="start" color="success" value="left"></ion-radio>
</ion-item>
</ion-radio-group><br><br>
<ion-item>
<input type="file" [(ngModel)]="countryFlag" (change)="selectedFile($event)"/>
</ion-item>
<ion-button id="submit-button" type="button" (click)="addCountry()">Add Country</ion-button>
<!-- <div class="bigButtonDiv">
<div class="buttonDiv" routerLink="/main">Go to home page</div>
<div class="buttonDiv" routerLink="/list">Go to result page</div>
</div> -->
</ion-content>