ボスのような形を通してデータを集める方法

フォームは私たちの生活の不可欠な部分です
彼らは文字通りどこでも、あなたが新しい社会的なメディアのアプリのためにサインアップしているとき、または何かを申請している.しかし、実際にフォームの背後に何が起こっているか知ってる?

古代の道🤦‍♂️
今、以前のフォームは、HTMLファイルのデータを収集し、MySQLデータベースに保存するために使用されました.このメソッドではPHPの基本的な理解も必要です.
しかし、あなたが知っているように、我々は難しい方法を取っていない


短い免責事項
私は知っている、あなたはちょうどそのような問題のためにGoogleフォームまたはtypeformまたは他のいかなるコードツールも使用しないかもしれません.しかし、このチュートリアルでは、フォームの機能や、コード内で実装される大規模な目的の制御をしたい人たちのためのものです.

我々は何を使用するつもりです✨
それで、我々が今日学ぶつもりであるものは、ちょうどあなたのHTMLコードに終点を加えて、あなたに美しく貢献しているデータを得ることによって、簡単にデータを集めることができる方法です.
我々は今日使用されるつもりであるアプリは、formboldです
(後援されない)


さあ始めましょう

ステップ1️⃣
フォームを作成します.lol
いいえ.我々は、データを収集するためのフォームを作成する必要があります
私がToowindで作ったフォームはこちら.

<!-- Tailwind Form -->
<div class="bg-white py-6 sm:py-8 lg:py-12">
  <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
    <!-- text - start -->
    <div class="mb-10 md:mb-16">
      <h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-6">Get in touch</h2>

      <p class="max-w-screen-md text-gray-500 md:text-lg text-center mx-auto">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated.</p>
    </div>
    <!-- text - end -->

    <!-- form - start -->
    <form class="max-w-screen-md grid sm:grid-cols-2 gap-4 mx-auto">
      <div>
        <label for="first-name" class="inline-block text-gray-800 text-sm sm:text-base mb-2">First name*</label>
        <input name="first-name" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div>
        <label for="last-name" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Last name*</label>
        <input name="last-name" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="company" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Company</label>
        <input name="company" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="email" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Email*</label>
        <input name="email" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="subject" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Subject*</label>
        <input name="subject" class="w-full bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2" />
      </div>

      <div class="sm:col-span-2">
        <label for="message" class="inline-block text-gray-800 text-sm sm:text-base mb-2">Message*</label>
        <textarea name="message" class="w-full h-64 bg-gray-50 text-gray-800 border focus:ring ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2"></textarea>
      </div>

      <div class="sm:col-span-2 flex justify-between items-center">
        <button class="inline-block bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 focus-visible:ring ring-indigo-300 text-white text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-3">Send</button>

        <span class="text-gray-500 text-sm">*Required</span>
      </div>

      <p class="text-gray-400 text-xs">By signing up to our newsletter you agree to our <a href="#" class="hover:text-indigo-500 active:text-indigo-600 underline transition duration-100">Privacy Policy</a>.</p>
    </form>
    <!-- form - end -->
  </div>
</div>

あなたは、フォームがhereに見える方法をチェックアウトすることができます

ステップ2️⃣
では、エンドポイントを追加しましょう.
あなたがFormboldのためにサインアップしたあと、あなたは新しい形を作る必要があります.

今、あなたのフォームに名前を付ける必要がありますすべての提出の通知を受信するメールアドレスを選択します.デフォルトでは、登録されたメールに通知を受け取ることができますが、新しいメールアドレスを追加することもできます.
新しいフォームを作成した後、その統合タブに移動し、エンドポイントがあります.

さて、HTMLでフォームタグに2つの属性を追加する必要があります.つの属性は動作とメソッドです.フォームタグは次のようになります

<form action="endpoint url" method= "POST" class="max-w-screen-md grid sm:grid-cols-2 gap-4 mx-auto">

ステップ3️⃣
我々の仕事は、ほとんど現在行われます!フォームをテストしましょう.

あなたが提出した後、レスポンスは記録されて、Formboldの上でフォームの提出タブで現れません

とVoila!
今、どのように3つの超簡単な手順でフォームデータを収集する方法を知っている.


読書ありがとう
あなたがこのポストが好きならば、私のnewsletterに予約してください
私のブログ、製品の起動、および技術のニュースを欠場することはありませんし、Web devのリソース上で毎日のスレッドの私に従ってください.