Home
Anonymous
Records Form - HPower

Records Form - HPower

Forked from> @jaxstone/survey-form

records survey form

This tailwind example is contributed by Anonymous, on 19-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Anonymous

343

Fork Fullscreen

<div class="bg-white border rounded-lg px-8 py-6 mx-auto my-8 max-w-3x3">
    <h2 class="text-2xl font-large font-bold mb-4">Records Survey</h2>
    <form>
        <div class="mb-4">
            <label for="doverNumber" class="block text-gray-700 font-medium mb-2">Existing Dover Job Number</label>
            <input type="text" id="doverNumber" name="doverNumber"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="jobNumber" class="block text-gray-700 font-medium mb-2">Job Number</label>
            <input type="text" id="jobNumber" name="jobNumber"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="elevatorClass" class="block text-gray-700 font-medium mb-2">Elevator Class</label>
            <select id="elevatorClass" name="elevatorClass"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
                <option value=""></option>
                <option value="passenger">Passenger</option>
                <option value="freight">Freight</option>
            </select>
        </div>
        <h4 class="text-2xl font-medium mb-4">Capacity | Up & Down Speed | Motor HP</h4>
        <div class="mb-4">
            <label for="capacity" class="block text-gray-700 font-medium mb-2">Capacity</label>
            <input type="number" id="capacity" name="capacity"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="upSpeed" class="block text-gray-700 font-medium mb-2">Up Speed</label>
            <input type="number" id="upSpeed" name="upSpeed"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="downSpeed" class="block text-gray-700 font-medium mb-2">Down Speed</label>
            <input type="number" id="downSpeed" name="downSpeed"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="motorHP" class="block text-gray-700 font-medium mb-2">Motor HP</label>
            <input type="number" id="motorHP" name="motorHP"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <h4 class="text-2xl font-medium mb-4">Landings / Openings</h4>
        <div class="mb-4">
            <label for="landings" class="block text-gray-700 font-medium mb-2">Landings</label>
            <input type="number" id="landings" name="landings"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="fopenings" class="block text-gray-700 font-medium mb-2">Front Openings</label>
            <input type="number" id="fopenings" name="fopenings"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="ropenings" class="block text-gray-700 font-medium mb-2">Rear Openings</label>
            <input type="number" id="ropenings" name="ropenings"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <h4 class="text-2xl font-medium mb-4">Jack - Plunger Diameter</h4>
        <div class="mb-4">
            <label for="plungerDiameter" class="block text-gray-700 font-medium mb-2">Plunger Diameter</label>
            <select id="plungerDiameter" name="plungerDiameter"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
                <option value=""></option>
                <option value="2-s">2-S</option>
                <option value="3-s">3-S</option>
                <option value="4-s">4-S</option>
                <option value="5-s">5-S</option>
                <option value="6-s">6-S</option>
            </select>
        </div>
        <div class="mb-4">
            <label for="notes" class="block text-gray-700 font-medium mb-2">Notes</label>
            <textarea id="notes" name="notes"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" rows="5"></textarea>
        </div>
        <div>
            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Submit</button>
        </div>

</form>
</div>

Related Examples

Default phone input

Author:
Md. Tofayel islam

11 months ago

2.1k
Comment form

Author:
Sophia Baker

2 years ago

11.6k
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

4 months ago

1.1k
Forgot password form
Useful form for sending password reset link

Author:
Anonymous

4 months ago

605
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.1k
Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

2 months ago

208
Forgot password form
Useful form for sending password reset link

Author:
Steven Kuhn

2 years ago

18.9k
Contact us page template
full page fancy contact us page

Author:
Geoffrey Callaghan

1 year ago

6.6k
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

1 week ago

275
Sign up for newsletter form

Author:
Amit Pachange

1 year ago

11.1k
Book Appointment form
A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

Author:
Arya

2 years ago

11k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

1 year ago

7.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components