{% extends "iris/layout.html" %}

{% block content %}

<div class="jumbotron">
<h1 style='color:green'> Names of Features</h1>

 <form name='IrisForm'onsubmit="return FormValidation() " method='post'
 action='SpeciesPrediction' required autocomplete="on">
 {% csrf_token %}

<div class='form-group'>

<label  style='color:blue' for='sepal_length'>sepal length(cm):</label><br>
<input class="form-control" type='number' min=0 max=8 step='any' name='sepal_length'
placeholder="enter the value of the sepal length "></div>

<div class='form-group'>
<label style='color:blue' for='sepal_width'>sepal width(cm):</label><br>
<input class="form-control " type='number' min=0 max=8 step='any' name='sepal_width'
placeholder="enter the value of the sepal width "></div>

 <div class='form-group'>
<label style='color:blue' for='petal_length'>petal length(cm):</label><br>
<input class="form-control" type='number'min=0 max=8 step='any' name='petal_length'
placeholder="enter the value of the petal length "></div>

  <div class='form-group;'>
<label style='color:blue' for='petal_width'>petal width(cm):</label><br>
<input class="form-control" type='number' min=0 max=8 step='any' name='petal_width'
placeholder="enter the value of the peatl width "></div><br>
<div class="m-2">
        <button type="submit" style="width:500px" class="btn btn-primary">Predict Species</button>
    </div>

 </form>
</div>

{% endblock %}