Task Form
Complete task creation and editing form with all necessary fields and validation.
Complete Task Form
Full-featured task creation form with all fields and validation.
HTML
<form class="space-y-6 bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
<!-- Task Title -->
<div>
<label for="task-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Task Title *
</label>
<input type="text" id="task-title" name="title" required
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
placeholder="Enter task title">
</div>
<!-- Description -->
<div>
<label for="task-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Description
</label>
<textarea id="task-description" name="description" rows="4"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-vertical"
placeholder="Describe the task..."></textarea>
</div>
<!-- Priority and Status -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="task-priority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Priority *
</label>
<select id="task-priority" name="priority" required
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
<option value="">Select priority...</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
<option value="urgent">Urgent</option>
</select>
</div>
<!-- More fields... -->
</div>
<!-- Form Actions -->
<div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700">
Cancel
</button>
<div class="flex space-x-3">
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700">
Save Draft
</button>
<button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md shadow-sm hover:bg-primary-700">
Create Task
</button>
</div>
</div>
</form>Quick Task Form
Simplified task creation for quick entry.
HTML
<form class="space-y-4 bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div>
<input type="text" name="quick_title" placeholder="What needs to be done?"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
</div>
<div class="flex items-center space-x-3">
<select name="quick_priority" class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
<option value="medium">Medium Priority</option>
<option value="low">Low Priority</option>
<option value="high">High Priority</option>
<option value="urgent">Urgent</option>
</select>
<button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md shadow-sm hover:bg-primary-700">
Add Task
</button>
</div>
</form>