Fieldset을 사용하여 양식 구성

내용물

Intro

Fieldset

Example

Summary

소개

Love them or loathe them forms are a critical part of most websites.

But what can we do to make them more organised and improve the user experience?

Introducing, fieldset a way to group inputs into logical containers.

First thing first, before we jump in, we need to ensure that all your inputs have a appropriate label and attributes.

It's a whole other blog post about why we should do this for accessibility and attributes for usability, but here a quick example:

<label>Mention this post from your site:
    <input type="url" name="source" placeholder="https://example.com" required="">
</label>

Or you can label your input this way if you prefer:

<input id="source" type="url" name="source" placeholder="https://example.com" required="">
<label for="source">Mention this post from your site:</label>

Now we've dipped our toe into forms and inputs, let's have a look at fieldset .

필드셋

Here is a form on a website asking our customer about their profile and address:

<form class="example">
    <label>What's your name?
        <input type="text" name="name" placeholder="John Smith" required="">
    </label>
    <label>What's your age?
        <input type="number" name="age" placeholder="26" required="">
    </label>
    <label>What is the first line of your address?
        <input type="text" name="address1" placeholder="2 Some Lane" required="">
    </label>
    <label>What city do you live in?
        <input type="text" name="city" placeholder="London" required="">
    </label>
    <label>What is your postcode?
        <input type="text" name="postcode" placeholder="ABC 123" required="">
    </label>
</form>

This isn't too bad at the moment, but you can quickly imagine this form getting much more lengthy!

We could split the form up into chunks and take the user through multiple steps, which is also a good way to solve this issue.
But we can also organise the form into logical groups, making it easier for the user to navigate.
This is where fieldsets come into their own!

<form class="example">
    <fieldset>
        <legend>Profile</legend>
        <label>What's your name?
            <input type="text" name="name" placeholder="John Smith" required="">
        </label>
        <label>What's your age?
            <input type="number" name="age" placeholder="26" required="">
        </label>
    </fieldset>
    <fieldset>
        <legend>Address</legend>
        <label>What is the first line of your address?
            <input type="text" name="address1" placeholder="2 Some Lane" required="">
        </label>
        <label>What city do you live in?
            <input type="text" name="city" placeholder="London" required="">
        </label>
        <label>What is your postcode?
            <input type="text" name="postcode" placeholder="ABC 123" required="">
        </label>
    </fieldset>
</form>

Easy!! Nice and organised into logical groups. The fieldset legends are also picked up by screen readers and accessibility tools to give much greater context to the form.

It also has one really powerful attribute you can use:

장애가 있는

이 속성을 사용하여 양식의 전체 섹션을 비활성화합니다!
이것은 양식의 흐름을 제어하는 정말 강력한 도구입니다.
예를 들어 자동 완성 도구를 사용하여 사용자 주소를 찾은 다음 양식을 채우거나 일치하는 항목을 찾을 수 없는 경우 수동으로 완료하도록 하려는 경우입니다. fieldset disabled 속성을 사용하여 이를 제어할 수 있으므로 준비가 되면 입력을 활성화할 수 있습니다.

<fieldset disabled="">
    <legend>Address</legend>
    <label>What is the first line of your address?
        <input type="text" name="address1" placeholder="2 Some Lane" required="">
    </label>
    <label>What is the second line of your address?
        <input type="text" name="address2" placeholder="2 Some Lane" required="">
    </label>
    ...
</fieldset>

예시

Here is an example HTML form , 보시다시피 양식이 사용자에게 필요한 것이 무엇인지 잘 정리되어 명확합니다.

예를 들어 주소 필드 집합을 비활성화했습니다.

이것은 실제 스타일링이 없지만 see how to style it here 할 수 있습니다.

<form>
    <fieldset>
        <legend>Profile</legend>
        <label>What's your name?
            <input type="text" name="name" placeholder="John Smith" required="">
        </label>
        <label>What's your age?
            <input type="number" name="age" placeholder="26" required="">
        </label>
    </fieldset>
    <fieldset disabled="">
        <legend>Address</legend>
        <label>What is the first line of your address?
            <input type="text" name="address1" placeholder="2 Some Lane" required="">
        </label>
        <label>What city do you live in?
            <input type="text" name="city" placeholder="London" required="">
        </label>
        <label>What is your postcode?
            <input type="text" name="postcode" placeholder="ABC 123" required="">
        </label>
    </fieldset>
</form>

요약

In summary, fieldset is a really powerful tool to control the flow of your forms, add more context and improve accessibility! Wins all around!

It can really help break up large forms into simpler chunks and make them easier to fill in.

보너스

또한 라디오 그룹 주변에서 사용자 경험을 개선하고 라디오 옵션이 무엇을 위한 것인지에 대한 컨텍스트를 제공하는 데 사용할 수 있습니다. 다음은 간단한 예입니다.

<fieldset>
    <legend>Choose your favorite monster:</legend>
    <label for="kraken">Kraken
        <input id="kraken" type="radio" name="monster" value="kraken">
    </label>
    <label for="sasquatch">Sasquatch
        <input id="sasquatch" type="radio" name="monster" value="sasquatch">
    </label>
    <label for="dragon">Dragon
        <input id="dragon" type="radio" name="monster" value="dragon">
    </label>
</fieldset>

이것이 도움이 되었기를 바라며 양식을 개선하는 방법에 대한 통찰력을 얻었습니다.

행복한 빌딩!

Reference

이 문제에 관하여(Fieldset을 사용하여 양식 구성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jordanfinners/organise-your-forms-with-fieldset-1g84

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Fieldset을 사용하여 양식 구성

내용물

소개

필드셋

장애가 있는

예시

요약

보너스

Reference

좋은 웹페이지 즐겨찾기