HTML 양식 컨트롤

HTML은 웹페이지 생성을 위한 마크업 언어입니다. 웹페이지 구조와 동작을 정의합니다. HTML은 웹 페이지를 구성하는 데 도움이 되는 태그와 요소로 구성됩니다. 이러한 요소는 사용자 친화적인 방식으로 사용자로부터 데이터를 수집하기 위해 양식 내에서 함께 그룹화될 수 있습니다. 그러나 HTML은 상태 비저장 프로토콜이므로 아무것도 저장할 수 없으며 페이지를 새로 고치면 데이터가 손실됩니다.

HTML 양식 제어

HTML에 정의된 다양한 유형의 양식 컨트롤이 있습니다. 이러한 컨트롤은 지정된 방식으로 사용자 입력을 수락하는 역할을 담당합니다. HTML에서 사용 가능한 다양한 유형의 양식 컨트롤을 살펴보겠습니다.

1) 텍스트 입력 제어

입력 텍스트 컨트롤은 사용자 데이터를 자유 텍스트로 수집하는 데 사용됩니다. 웹페이지에서는 사용자가 데이터를 입력할 수 있는 직사각형 상자를 형성합니다.

HTML 양식에 사용할 수 있는 다양한 유형의 입력 텍스트 컨트롤이 있습니다. 다양한 유형의 입력 텍스트 컨트롤을 살펴보겠습니다.

• 한 줄 입력 텍스트 제어

이렇게 하면 사용자는 한 줄의 데이터만 입력할 수 있습니다. 이러한 입력 텍스트 컨트롤의 일반적인 예는 이름, 검색창, 도시 등을 입력하는 것입니다.

• 다줄 입력 텍스트 제어

이 입력 제어 유형을 사용하면 사용자가 여러 줄의 데이터를 입력할 수 있습니다. 이러한 입력 컨트롤의 일반적인 용도는 댓글, 주소, 설명 등에 있습니다.

 

여기에서 행은 텍스트 영역의 줄 수를 나타내고 열은 열 수를 나타냅니다.

• 비밀번호 입력 제어

이름에서 알 수 있듯이 일반적으로 비밀번호 필드에 사용됩니다. 이는 입력 텍스트 필드와 동일한 방식으로 작동하지만 안전을 위해 텍스트가 마스킹됩니다.

2) 입력 유형 제출

입력 유형이 submit인 경우, form action에 정의된 action을 수행하고 form 데이터를 서버로 보냅니다.

여기서 제출 버튼의 버튼 클릭 이벤트 시 사용자 이름과 비밀번호 값이 서버에 제출됩니다. 양식의 작업은 입력을 받아들이는 서버 메서드입니다.

3) 입력형 라디오

라디오 버튼은 사용자가 데이터를 부울 값으로 채울 것으로 예상하거나 여러 옵션 중 하나의 입력만 true로 예상할 때 사용됩니다. 라디오 버튼의 일반적인 사용 사례로는 성별 결정, 직원 유형(정규직/임시직) 등이 있습니다.

4) 입력 유형 체크박스

체크박스를 사용하면 사용자는 자신의 경우에 맞는 정보를 선택할 수 있습니다. 가능한 입력이 이미 알려진 경우 데이터를 받아들이는 매우 편리한 방법입니다.

예를 들어 개인이 보유한 보험 유형을 수집하려는 경우 옵션이 제한되어 있으므로 확인란을 사용하여 쉽게 수집할 수 있습니다.

5) 입력 유형 드롭다운 목록

드롭다운 목록을 통해 사용자는 여러 가능한 옵션 중에서 하나를 선택할 수 있습니다. 이는 사용자가 자신에게 가장 적합한 옵션을 식별하는 데 도움이 되는 가능한 옵션의 전체 목록을 제공하므로 사용자로부터 세부 정보를 얻을 수 있는 매우 사용자 친화적인 방법입니다.

예를 들어 직원이 속할 수 있는 도시를 나열하는 드롭다운

6) 입력 유형 Optgroup

Optgroup은 드롭다운 목록과 비슷한 방식으로 작동합니다. 유일한 차이점은 optgroup을 사용하면 특정 옵션을 논리적으로 하나의 우산 아래에 그룹화할 수 있다는 것입니다. optgroup 라벨의 도움으로 사용자가 관련 옵션을 빠르게 식별하는 데 도움이 됩니다.

예를 들어 인도의 여러 주의 도시를 주별로 그룹화하여 나열하는 드롭다운 목록입니다.

7) Fieldset

Fieldset is another useful tag in the Html form that lets the developer logically group certain controls under one legend; this helps the developer give the User clear instruction on what to expect in this section.

For example, the fieldset for the login page.

8) HTML output Tag

This output tag is introduced in HTML5. It let you display the output of a calculation instantly. This is quite useful when the user needs to do a calculation instantly and see the results. A typical example of such a cases is when the user wants to check the sum of all the items present in the cart.

In the example above, we have defined the item price range as 0 to 100 and can be changed on runtime, the other text box, which has a value of 12 in it is the tax levied on that item; it can also be changed on runtime. The output result 58 is the sum of both values.

Note: This tag is not supported on Edge 12 or Internet Explorer of an earlier version.

9) Input type Color

It is often required in the form to just show the color instead of any text. Input type color in HTML 5 will let you do that. It shows the color which you want to display in the form. Typical scenario’s where it is being used is to show the status of a project or a phase.

Note: color is not supported in certain versions of Internet Explorer and Edge.

10) Input type Date

Input type date is commonly used where the User expects a date type field as input; it could be anything like a Date of Birth, Hiring date, termination date, etc. It is introduced in HTML 5, and the date format varies a little with the change of browser.

Conclusion

• With the introduction of HTML 5, there has been a tremendous increase in the number of HTML controls being supported. These HTML form controls can be given various effects and colors with the help of CSS 3 and JavaScript / jQuery / Angular JS.
• In this article, we have covered all the commonly used HTML form controls. There are many controls such as hidden, reset, week, URL, time, email, file, DateTime-local, image, tel that has not been covered in this article. It is very important to check the browser compatibility of these controls before implementing this in the project as many browser version doesn’t support HTML 5 form controls.

위 내용은 HTML 양식 컨트롤의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!