양식 관련 태그

Articles

HTML 소개

양식 관련 태그

이 글은 양식 관련 태그를 설명합니다.

여기에는 텍스트 입력과 드롭다운 메뉴와 같은 다양한 폼 필드에 대한 설명이 포함되어 있습니다.

YouTube Video

양식 관련 태그

`<form>` 태그

1<form action="/submit" method="post">...</form>

<form> 태그는 전체 폼을 정의하는 데 사용됩니다.
action 속성은 목적지를 지정하고, method 속성은 메서드(GET 또는 POST)를 지정합니다.
<a> 태그와 유사하게 target 속성을 지정할 수도 있습니다.

`<input>` 태그 (텍스트 입력 필드)

1<input type="text" name="username" placeholder="Enter your username">

<input type="text">는 한 줄의 텍스트 입력 필드를 만듭니다. 사용자는 임의의 텍스트를 입력할 수 있습니다.
placeholder 속성은 입력 필드가 비어있을 때 표시되는 설명 텍스트를 지정합니다. 이것은 사용자가 기대되는 입력값을 쉽게 이해하도록 도와줍니다. 이 텍스트는 입력이 시작되면 자동으로 사라집니다.
- placeholder는 보조 정보를 제공하는 데 적합하며, 필수 입력과 같은 중요한 지침에는 적합하지 않습니다. 이러한 경우에는 레이블을 사용해야 합니다.

`<input>` 태그 (비밀번호 입력 필드)

1<input type="password" name="password" placeholder="Type your password here">

<input type="password">는 비밀번호 입력을 위한 필드를 만듭니다. 입력된 문자는 숨겨지고 마스킹되어 보안이 보장됩니다.

`<input>` 태그 (이메일 주소 입력 필드)

1<input type="email" name="email" placeholder="Enter your email">

<input type="email">는 이메일 주소를 입력하는 필드를 만들고 올바른 이메일 형식을 보장하기 위한 유효성 검사를 포함합니다.

`<input>` 태그 (체크박스)

Subscribe to newsletter

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

<input type="checkbox">는 체크박스를 만듭니다. 여러 옵션이 있는 경우, 사용자는 여러 항목을 선택할 수 있습니다.

`<input>` 태그 (라디오 버튼)

Male
Female

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

<input type="radio">는 사용자가 하나의 옵션만 선택할 수 있는 라디오 버튼을 만듭니다.

`<input>` 태그 (제출 버튼)

1<input type="submit" value="Submit">

<input type="submit">는 양식의 데이터를 제출하기 위한 버튼을 만듭니다.
value 속성의 값은 제출 시 양식 데이터에 포함됩니다.

`<input>` 태그 (리셋 버튼)

1<input type="reset" value="Reset">

<input type="reset">는 폼 내의 모든 입력 값을 초기화하는 버튼을 생성합니다.

`<input>` 태그 (숨김 필드)

1<input type="hidden" name="userid" value="12345">

<input type="hidden">는 화면에 표시되지 않는 숨겨진 필드를 생성하며, 폼이 제출될 때 데이터를 백엔드로 보내는 데 사용됩니다.

`<input>` 태그 (색상 선택기)

1<input type="color" name="favcolor" value="#ff0000">

<input type="color">는 색상 선택기를 표시하고 사용자가 색상을 선택할 수 있는 입력 필드를 만듭니다.

`<input>` 태그 (날짜 입력 필드)

1<input type="date" name="birthday">

<input type="date">는 날짜를 선택하기 위한 캘린더를 표시하는 날짜 입력 필드를 만듭니다.

`<input>` 태그 (시간 입력 필드)

1<input type="time" name="appointment_time">

<input type="time">는 시간을 입력하는 필드를 만들며, 시간 선택기가 표시됩니다.

`<input>` 태그 (파일 입력 필드)

1<input type="file" name="resume">

<input type="file">는 사용자가 파일을 선택하고 업로드할 수 있는 입력 필드를 생성합니다.
form 태그의 enctype 속성은 multipart/form-data로 설정해야 합니다.

`<input>` 태그 (숫자)

1<input type="number" name="quantity" min="1" max="10">

<input type="number">는 최소값, 최대값 및 단계(증가/감소 양)을 설정할 수 있는 숫자 입력 필드를 생성합니다.

`<input>` 태그 (숫자 범위 선택 필드)

1<input type="range" name="volume" min="0" max="100" value="50">

<input type="range">는 사용자가 슬라이더를 사용하여 범위 내에서 값을 선택할 수 있는 입력 필드를 생성합니다.

`<textarea>` 태그

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

<textarea> 태그는 여러 줄로 된 텍스트 입력 필드를 생성합니다. 긴 텍스트나 댓글을 입력하는 데 적합합니다.

`<select>` 태그

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

<select> 태그는 드롭다운 메뉴를 생성하며, 옵션은 <option> 태그로 정의됩니다. 사용자는 하나 또는 여러 항목을 선택할 수 있습니다.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

여러 항목을 선택할 수 있도록 하려면 multiple 특성을 추가하세요. 이 특성을 지정하면 옵션이 리스트 박스로 표시됩니다.

`<optgroup>` 태그

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

<optgroup> 태그는 관련 항목들을 그룹으로 묶는 데 사용됩니다. label 특성을 사용하여 그룹 이름을 설정할 수 있으며, 리스트가 길어도 사용자에게 명확한 옵션을 제공합니다.

`<label>` 태그

Username:

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

<label> 태그는 입력 필드, 체크박스, 라디오 버튼의 레이블을 정의하며, 사용성 및 접근성을 향상시킵니다.
예를 들어, 레이블을 클릭하면 입력 필드에 포커스를 맞추거나 체크박스를 켜거나 끌 수 있습니다.

`<fieldset>` 태그

Personal Information Name:

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

<fieldset> 태그는 관련 폼 컨트롤을 그룹화하며, <legend> 태그는 그룹에 대한 제목을 제공합니다.

`<button>` 태그

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

<button> 태그는 폼 제출 또는 다른 동작을 실행하는 클릭 가능한 버튼을 정의합니다.

type="button"이 지정되면 일반 버튼으로 작동합니다. 클릭해도 폼이 제출되지 않으며 다른 기본 동작이 실행되지 않습니다. JavaScript로 사용자 정의 동작을 설정하고자 할 때 사용됩니다.

type="submit"이 지정되면 폼의 제출 버튼으로 작동합니다. 이 버튼을 클릭하면 해당 버튼이 포함된 폼이 제출됩니다.

type="reset"이 지정되면, 폼의 리셋 버튼으로 작동합니다. 이를 클릭하면 폼의 모든 입력 필드가 초기 상태로 리셋됩니다.

type 속성을 지정하지 않으면 일부 브라우저는 이를 type="submit"으로 처리할 수 있으므로, 의도한 동작을 보장하기 위해 명시적으로 타입을 지정하는 것이 권장됩니다.
<input> 태그를 사용하는 제출 버튼은 value 속성의 값이 폼 데이터에 포함되지만, <button> 태그는 기본적으로 전송되지 않습니다.

<button> 태그에 name 및 value 속성을 지정하면, 그 값이 폼 데이터로 전송될 수 있습니다.

`<datalist>` 태그

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

<datalist> 태그는 <input> 요소에 대해 선택 가능한 옵션 목록을 제공합니다. 사용자는 목록에서 선택하거나 자신의 값을 입력할 수 있습니다.

`<output>` 태그

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

<output> 태그는 계산 또는 사용자 상호 작용의 결과를 표시합니다. 이는 폼이나 스크립트 내에서 동적으로 계산 결과를 표시하는 데 사용됩니다.
for 속성에는 연결하려는 폼 요소들의 ID를 공백으로 구분하여 지정하세요.

`<progress>` 태그

70%

1<progress value="70" max="100">70%</progress>

<progress> 태그는 사용자에게 작업의 진행 상황을 보여줍니다. 예를 들어, 파일 다운로드 또는 설치의 진행 상황을 시각적으로 표시할 수 있습니다.

`<meter>` 태그

60%

1<meter value="0.6">60%</meter>

<meter> 태그는 특정 범위 내의 숫자 측정을 나타냅니다. 이는 디스크 사용량이나 연료 게이지와 같은 측정을 특정 범위 내에서 표시하는 데 사용됩니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

미디어 관련 태그 폼 검증

양식 관련 태그

YouTube Video

양식 관련 태그

<form> 태그

<input> 태그 (텍스트 입력 필드)

<input> 태그 (비밀번호 입력 필드)

<input> 태그 (이메일 주소 입력 필드)

<input> 태그 (체크박스)

<input> 태그 (라디오 버튼)

<input> 태그 (제출 버튼)

<input> 태그 (리셋 버튼)

<input> 태그 (숨김 필드)

<input> 태그 (색상 선택기)

<input> 태그 (날짜 입력 필드)

<input> 태그 (시간 입력 필드)

<input> 태그 (파일 입력 필드)

<input> 태그 (숫자)

<input> 태그 (숫자 범위 선택 필드)

<textarea> 태그

<select> 태그

<optgroup> 태그

<label> 태그

<fieldset> 태그

<button> 태그

<datalist> 태그

<output> 태그

<progress> 태그

<meter> 태그

YouTube Video

`<form>` 태그

`<input>` 태그 (텍스트 입력 필드)

`<input>` 태그 (비밀번호 입력 필드)

`<input>` 태그 (이메일 주소 입력 필드)

`<input>` 태그 (체크박스)

`<input>` 태그 (라디오 버튼)

`<input>` 태그 (제출 버튼)

`<input>` 태그 (리셋 버튼)

`<input>` 태그 (숨김 필드)

`<input>` 태그 (색상 선택기)

`<input>` 태그 (날짜 입력 필드)

`<input>` 태그 (시간 입력 필드)

`<input>` 태그 (파일 입력 필드)

`<input>` 태그 (숫자)

`<input>` 태그 (숫자 범위 선택 필드)

`<textarea>` 태그

`<select>` 태그

`<optgroup>` 태그

`<label>` 태그

`<fieldset>` 태그

`<button>` 태그

`<datalist>` 태그

`<output>` 태그

`<progress>` 태그

`<meter>` 태그