2. Submitting Form Data from The Frontend

Published a year ago

Form HTML for Copy / Pasting
<div class="h-screen flex items-center">
  <div
    class="container max-w-md mx-auto xl:max-w-3xl flex bg-white rounded-lg shadow overflow-hidden flex"
  >
    <div class="relative hidden xl:block xl:w-1/2 h-full">
      <img
        class="absolute h-auto w-full object-cover"
        src="https://images.unsplash.com/photo-1541233349642-6e425fe6190e"
        alt="my zomato"
      />
    </div>
    <div class="w-full xl:w-1/2 p-8">
      <form @submit.prevent="">
        <h1 class=" text-2xl font-bold">Create an account</h1>
        <div class="mb-4 mt-6">
          <label
            class="block text-gray-700 text-sm font-semibold mb-2"
            htmlFor="email"
          >
            Email
          </label>
          <input
            id="email"
            class="text-sm appearance-none rounded w-full py-2 px-3 text-gray-700 bg-gray-200 leading-tight focus:outline-none focus:shadow-outline h-10"
            type="text"
            placeholder="Your email address"
          />
        </div>
        <div class="mb-6 mt-6">
          <label
            class="block text-gray-700 text-sm font-semibold mb-2"
            htmlFor="password"
          >
            Password
          </label>
          <input
            id="password"
            class="text-sm bg-gray-200 appearance-none rounded w-full py-2 px-3 text-gray-700 mb-1 leading-tight focus:outline-none focus:shadow-outline h-10"
            type="password"
            placeholder="Your password"
          />
        </div>
        <div class="flex w-full mt-8">
          <button
            class="w-full bg-gray-800 hover:bg-grey-900 text-white text-sm py-2 px-4 font-semibold rounded focus:outline-none focus:shadow-outline h-10"
          >
            Create Account
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Comments

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.