: Designing an HTML form input that takes a range of numbers as well as text options I have the following form: <table class="table"> <thead> <tr>

Posted in: #Django #Forms #Html #Python #WebsiteDesign

I have the following form:

<table class="table">
<thead>
<tr>

<th><h4>Monday</h4></th>
<th><h4>Tuesday</h4></th>
<th><h4>Wednesday</h4></th>
<th><h4>Thursday</h4></th>
<th><h4>Friday</h4></th>
<th><h4>Add</h4></th>
</tr>
</thead>
<tbody>
<tr>
<form id="tracking_form">
<td><input type="number" name="monday" class="weekday_points" min="0" max="100" required id="id_monday" /></td>
<td><input type="number" name="tuesday" class="weekday_points" min="0" max="100" required id="id_tuesday" /></td>
<td><input type="number" name="wednesday" class="weekday_points" min="0" max="100" required id="id_wednesday" /></td>
<td><input type="number" name="thursday" class="weekday_points" min="0" max="100" required id="id_thursday" /></td>
<td><input type="number" name="friday" class="weekday_points" min="0" max="100" required id="id_friday" /></td>
<td><input type="button" class="btn btn-default" onclick="submitIfUnique()" value="Add Points"></td>
</form>
</tr>
</tbody>
<tfoot>

</tfoot>
</table>

Where a user enters a number from 0 to 100 as a score for a student. I also want to track whether the student was absent, whether the absence was explained, etc. If the student was absent, then the user shouldn't then be able to enter a score. What would be a good form design for a use case like this?

I'm working in Django, so I could change the weekday number inputs to text inputs and provide choices like this:

settings.py:

SCORE = ['Present', 'Absent (Not Explained)', 'Absent (Explained)', 'Integrating'] + [x for x in range(0, 101)]

models.py:

monday = models.CharField(choices=settings.SCORE)
tuesday = models.CharField(choices=settings.SCORE)
wednesday = models.CharField(choices=settings.SCORE)
thursday = models.CharField(choices=settings.SCORE)
friday = models.CharField(choices=settings.SCORE)

The problem is, the input would now be a dropdown with over 100 options, which which makes it more difficult for a user who just wants to type a number

The other thing I though of is to split the above solution into two fields; the first for whether the student was 'Present', 'Absent (Not Explained)', 'Absent (Explained)', or 'Integrating'. Then, if they were present the number field appears which let's the user enter the score, but this seems difficult, and my form already takes the full width of the screen so adding even more fields is less than ideal.

Are there any other simple options available to me design wise? Nothing I've come up with so far seems feasible.