HTML/Bootstrap form with Json API - php

Question

I want to create a simple HTML form (ideally using bootstrap).
On this form some input elements are filled by the user(which is simple!) but I also need to call an API with json data to fill a drop down box. like list of countries,etc.
How can I implement API into a form?
thanks
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>My form</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input id="title" name="title" type="text" placeholder="Article on Banking,etc." class="input-medium">
</div>
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="Article Type">Article Type</label>
<div class="controls">
<select id="Article Type" name="Article Type" class="input-xlarge">
<option>ashkanarvaneh.co.uk/test/api.json</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="control-group">
<label class="control-label" for="summary">Summary</label>
<div class="controls">
<textarea id="summary" name="summary">Enthusiastically strategize superior infomediaries after clicks-and-mortar process improvements. Appropriately incubate stand-alone methodologies vis-a-vis pandemic potentialities. Authoritatively build.</textarea>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="submit">Submit</label>
<div class="controls">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>

Answer 1

Try Example
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="Article Type">Article Type</label>
<div class="controls">
<select id="Article Type" name="Article Type" class="input-xlarge">
<?php
$countries = file_get_contents("http://ashkanarvaneh.co.uk/test/api.json");
$countries = json_decode($countries, true);
foreach($countries as $country)
{
echo "<option value='".$country['Id']."'>".$country['Description']."</option>";
}
?>
<!--<option>http://publicapidev.chambersandpartners.com/api/taggedlocations</option>-->
</select>
</div>
</div>
Note The above code is tested & works fine.