Skip to content

Instantly share code, notes, and snippets.

@aburan28

aburan28/gist:c6bfe060b432357644d1476ae9f2005b

Created July 23, 2024 23:57
Show Gist options
  • Save aburan28/c6bfe060b432357644d1476ae9f2005b to your computer and use it in GitHub Desktop.
Save aburan28/c6bfe060b432357644d1476ae9f2005b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Flowbite</title>
<link href="https://unpkg.com/flowbite@1.6.0/dist/flowbite.min.css" rel="stylesheet">
<script src="https://unpkg.com/flowbite@1.6.0/dist/flowbite.min.js"></script>
</head>
<body>
<div class="container mx-auto p-4">
<form action="/bootstrap" method="POST" id="myForm">
<!-- Region Selector -->
<div class="mb-4">
<label for="region" class="block text-sm font-medium text-gray-700">Region</label>
<select id="region" name="region[]" multiple class="form-select mt-1 block w-full">
<option value="us-east-1">us-east-1</option>
<option value="us-west-2">us-west-2</option>
<option value="eu-west-1">eu-west-1</option>
</select>
</div>
<!-- Workload Type -->
<div class="mb-4">
<label for="workload" class="block text-sm font-medium text-gray-700">Workload Type</label>
<select id="workload" name="workload" class="form-select mt-1 block w-full">
<option value="Deployment">Deployment</option>
<option value="StatefulSet">StatefulSet</option>
<option value="DaemonSet">DaemonSet</option>
<option value="CronJob">CronJob</option>
</select>
</div>
<!-- Environment Selector -->
<div class="mb-4">
<label for="environment" class="block text-sm font-medium text-gray-700">Environment</label>
<select id="environment" name="environment[]" multiple class="form-select mt-1 block w-full">
<option value="dev">dev</option>
<option value="stage">stage</option>
<option value="prod">prod</option>
</select>
</div>
<!-- IAM Role Checkbox -->
<div class="mb-4">
<label for="iam_role" class="block text-sm font-medium text-gray-700">Require IAM Role</label>
<input type="checkbox" id="iam_role" name="iam_role" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</div>
<!-- Image Names -->
<div class="mb-4">
<label for="image_names" class="block text-sm font-medium text-gray-700">Image Names</label>
<div id="image-inputs">
<input type="text" name="image_names[]" class="form-input mt-1 block w-full" placeholder="Enter image name">
</div>
<button type="button" id="add-image-input" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded">Add Another Image</button>
</div>
<!-- PR Generator Checkbox -->
<div class="mb-4">
<label for="pr_generator" class="block text-sm font-medium text-gray-700">Require PR Generator</label>
<input type="checkbox" id="pr_generator" name="pr_generator" class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</div>
<!-- Submit Button -->
<div>
<button type="submit" class="px-4 py-2 bg-green-500 text-white rounded">Submit</button>
</div>
</form>
</div>
<script>
document.getElementById('add-image-input').addEventListener('click', function() {
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.name = 'image_names[]';
newInput.className = 'form-input mt-1 block w-full';
newInput.placeholder = 'Enter image name';
document.getElementById('image-inputs').appendChild(newInput);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment