Form

[YuezhenQin]

<form method="post" action="">
    <section>
        <h2 id="info">info</h2>
        <div class="info">
            <lable for=""></label>
            <input id="" type="text">
        </div>
        <div class="info">
            <lable for=""></label>
            <input id="" type="text">
        </div>
    </section>
    <section>
        <h2 id="html-questions">html</h2>
    </section>
    <section>
        <h2 id="css-questions">css</h2>
    </section>
    <section>
        <h2 id="js-questions">javascript</h2>
    </section>

</form>

Group the relevant inputs together such that only one input from a pair can be selected at a time.

    <input name="q1">

Step 34 To prevent unnecessary repetition, target the before pseudo-element of the p element, and give it a content property of "Question #".

p:before {
  content: "Question #"
}

[YuezhenQin]

Form Design Patterns was written by Adam Silver and reviewed by Heydon Pickering.

[YuezhenQin]

A Registration Form

Despite the registration form’s basic appearance, there are many things to consider: the primitive elements that make up a form (The form is made up of four fields and a submit button. Each field is made up of a control (the input) and its associated label), ways to reduce effort, all the way through to form validation.

float label pattern

hint text pattern

the question protocol

displying feedback

inline error patterns

A Login Form

no password signin

A Search Form, A Fliter Form

An Expense Form

one thing per page pattern

persistent form pattern

add another pattern

A Travel Booking Form

In this chapter, we’ll design a flight booking service. At first glance this may seem a bit niche, especially when compared to “A Registration Form” and “A Checkout Form.” However, we’re going to explore several complex problems that, in the end, will result in reusable patterns — patterns that are very much transferable to other problem domains.

An Upload Form

A Really Long and Complicdated Form

check before start pattern

task list pattern