thinkNote

▶ HTML <input> 요소의 다양한 속성을 설명한다.

■ value 속성

▶ input "value" 속성은 입력 필드의 초기값을 지정한다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_value 

■ readonly 속성

▶ input "readonly" 전용 속성은 입력 필드가 읽기 전용임을 지정한다.

▶ 읽기 전용 input 필드는 수정할 수 없다. ( 사용자는 탭하여 강조 표시하고 텍스트를 복사할 수 있다. )

▶ 양식을 제출할 때 읽기 전용 input 필드의 값이 전송된다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_readonly 

■ disabled 속성

▶ input "disabled" 속성은 input 필드가 비활성화되어야 함을 지정한다.

▶ 비활성화된 input 필드는 사용할 수 없으며 클릭할 수 없다.

▶ 비활성화된 입력 필드의 값은 양식을 제출할 때 전송되지 않는다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_disabled 

■ size 속성

▶ input "size" 속성은 input 필드의 표시 너비(문자)를 지정한다.

▶ "size"의 기본값은 20이다.

※ "size" 속성은 text, search, tel, url, email 및 password 와 같은 input 유형에서 작동한다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_size 

■ maxlength 속성

▶ input "maxlength" 속성은 input 필드에 허용되는 최대 문자 수를 지정한다.

※ "maxlength"가 설정되면 input 필드는 지정된 문자 수 이상을 허용하지 않으며 피드백을 제공하지 않는다.

※ 따라서 사용자에게 경고하려면 Javascript 코드를 작성해야 한다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_maxlength 

■ min와 max 속성

▶ input "min" 및 "max" 속성은 input 필드의 최소값과 최대값을 지정한다.

▶ "min" 및 "max" 속성은 number, range, date, datetime-local, month, time, week 같은 input 유형과 함께 작동한다.

※ "min" 및 "max" 속성을 함께 사용하여 유효한 값 범위를 만든다.

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min 

■ multiple 속성

▶ input "multiple" 속성은 사용자가 입력 필드에 둘 이상의 값을 입력할 수 있도록 지정한다.

▶ "multiple" 속성은 email, file 과 같은 input 유형에서 작동한다.

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_multiple 

■ pattern 속성

▶ input "pattern" 속성은 양식이 제출될 때 input 필드의 값이 확인되는 정규식을 지정한다.

▶ "pattern" 속성은 text, date, search, url, tel, email, password 와 같은 input 유형과 함께 동작한다.

※ 전역 "title" 속성을 사용하여 패턴을 설명하면 사용자에게 도움된다.

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern 

■ placeholder 속성

▶ input "placeholder" 속성은 input 필드의 예상 값 ( 샘플 값 또는 예상 형식에 대한 간단한 설명 )을 설명하는 간단한 힌트를 지정한다.

▶ 짧은 힌트는 사용자가 값을 입력하기 전에 입력 필드에 표시된다.

▶ "placeholder" 속성은 text, search, url, tel, email, password 와 같은 input 유형과 함께 작동한다.

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder 

■ required 속성

▶ input "required" 속성은 양식을 제출하기 전에 input 필드를 채워야 함을 지정한다.

▶ "required" 속성은 text, search, url, tel, email, password, date pickers, number, checkbox, radio, file과 같은 input 유형과 함께 작동한다.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required 

■ step 속성

▶ input "step" 속성은 input 필드의 유효한 숫자 간격을 지정한다.

▶ 예시 : step="3" 인 경우 유효한 숫자는 -3, 0, 3, 6 등이 될 수 있다.

※ 이 속성은 "max" 및 "min" 속성과 함께 사용되어 유효한 값 범위를 생성할 수 있다.

▶ "step" 속성은 number, range, date, datetime-local, month, time, week와 같은 input 유형과 함께 동작한다.

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_step 

※ input 제한은 완벽하지 않으며 Javascript는 잘못된 입력을 추가하는 방법을 제공한다.

※ 입력을 안전하게 제한하려면 서버도 확인해야 한다.

■ autofocus 속성

▶ input "autofocus" 속성은 페이지가 로드될 때 input 필드가 자동으로 초점을 받도록 지정한다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_autofocus 

■ height과 width 속성

▶ input "height" 및 "width" 속성은 <input type="image"> 요소의 높이 및 너비를 지정한다.

※ 항상 이미지의 "height" 및 "width" 속성을 모두 지정한다.

※ 높이와 너비를 설정하면 페이지가 로드될 때 이미지에 필요한 공간이 예약된다.

※ 이러한 속성이 없으면 Browser는 이미지의 크기를 알 수 없으며 적절한 공간을 예약할 수 없다.

※ 그 효과는 로드하는 동안 (이미지가 로드되는 동안) 페이지 레이아웃이 변경된다는 것이다.

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_height_width 

■ list 속성

▶ input "list" 속성은 <input> 요소에 대해 미리 정의된 옵션을 포함하는 <datalist> 요소를 참조한다.

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_datalist 

■ autocomplete 속성

▶ input "autocomplete" 속성은 양식 또는 input 필드에서 자동 완성을 켜거나 꺼야 하는지 여부를 지정한다.

▶ "autocomplete" 를 사용하면 Browser가 값을 예측할 수 있다.

▶ 사용자가 필드에 입력하기 시작하면 Browser는 이전에 입력한 값을 기반으로 필드를 채울 수 있는 옵션을 표시해야 한다.

▶ "autocomplete" 속성은 <form> 및 text, search, url, tel, email, password, datepickers, range, color 와 같은 input 유형에서 작동한다.

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_autocomplete 

※ 일부 Browser에서는 이 기능이 작동하려면 "autocomplete" 기능을 활성화해야 할 수 있다.

출처 : https://www.w3schools.com/html/html_form_attributes.asp

▶HTML <input> 요소의 다양한 유형을 설명한다.

■ HTML Input Type

▶ 아래에 항목은 HTML에서 사용할 수 있는 다양한 input 유형이다.

▷ <input type="button">

▷ <input type="checkbox">

▷ <input type="color">

▷ <input type="date">

▷ <input type="datetime-local">

▷ <input type="email">

▷ <input type="file">

▷ <input type="hidden">

▷ <input type="image">

▷ <input type="month">

▷ <input type="number">

▷ <input type="password">

▷ <input type="radio">

▷ <input type="range">

▷ <input type="reset">

▷ <input type="search">

▷ <input type="submit">

▷ <input type="tel">

▷ <input type="text">

▷ <input type="time">

▷ <input type="url">

▷ <input type="week">

※ "type" 속성의 기본 값은 "text" 이다.

■ Input  Type Text

▶ <input type="text">는 한 줄 텍스트 입력 필드를 정의한다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_text 

■ Input Type Password

▶ <input type="password">는 비밀번호 필드를 정의한다.

<form>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

실습 : https://www.w3schools.com/html/html_form_input_types.asp

※ 비밀번호 필드 안에 문자는 마스킹 기호로 표시된다.

■ Input Type Submit

▶ <input type="submit">은 폼 핸들러에 폼 데이터를 제출하기 위한 버튼을 정의한다.

▶ 폼 핸들러는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 있는 서버 페이지이다.

▶ 폼 핸들러는 폼의 "action" 속성에 지정된다.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_submit 

▶ submit 버튼의 속성 값을 생략하면 버튼은 기본 텍스트를 가진다.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_submit_nn 

■ Input Type Reset

▶ <input type="reset">은 모든 폼 값을 기본값으로 재설정하는 재설정 버튼을 정의한다.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_reset 

※ 입력 값을 변경한 후 "재설정" 버튼을 클릭하면 폼 데이터가 기본값으로 재설정된다.

■ Input Type Radie

▶ <input type="radio">는 라디오 버튼을 정의한다.

▶ 라디오 버튼을 사용하면 제한된 수의 선택 항목 중 하나만 선택할 수 있다.

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_radio 

■ Input Type Checkbox

▶ <input type="checkbox">는 체크박스를 정의한다.

▶ 체크박스를 사용하면 제한된 수의 선택 항목 중 선택하지 않거나 한 개 이상을 선택할 수 있다.

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_checkbox2 

■ Input Type button

▶ <input type="button">은 버튼을 정의한다.

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

■ Input Type Color

▶ <input type="color">는 색상을 포함해야 하는 입력 필드에 사용된다.

▶ Browser 지원에 따라 색상 선택기가 입력 필드에 나타날 수 있다.

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_color 

■ Input Type Date

▶ <input type="date">는 날짜를 포함해야 하는 입력 필드에 사용된다.

▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date 

▶ "min" 및 "max" 속성을 사용하여 날짜에 제한을 추가할 수도 있다.

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date_max_min 

■ Input Type Datetime-local

▶ <input type="datetime-local">은 시간대 없이 날짜 및 시간 입력 필드를 지정한다.

▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_datetime-local 

■ Input Type Email

▶ <input type="email">은 이메일 주소를 포함해야 하는 입력 필드에 사용된다.

▶ Browser 지원에 따라 전자 메일 주소는 제출 시 자동으로 확인될 수 있다.

▶ 일부 스마트폰은 이 메일 유형을 인식하고 이메일 입력과 일치하도록 키보드에 ".com"을 추가한다.

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email 

■ Input Type Image

▶ <input type="image">는 이미지를 제출 버튼으로 정의한다.

▶ 이미지 경로는 "src" 속성에 지정된다.

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_image 

■ Input Type File

▶ <input type="file">은 파일 선택 필드와 파일 업로드를 위한 "찾아보기"버튼을 정의한다.

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_file 

■ Input Type Hidden

▶ <input type="hidden">은 숨겨진 입력 필드를 정의한다. ( 사용자에게 표시되지 않음 )

▶ hidden 필드를 사용하면 웹 개발자가 양식을 제출할 때 사용자가 보거나 수정할 수 없는 데이터를 포함할 수 있다.

▶ 숨겨진 필드는 종종 양식을 제출할 때 업데이트해야 하는 데이터베이스 레코드를 저장한다.

※ 참고 : 값은 페이지 콘텐츠에서 사용자에게 표시되지 않지만 모든 Browser의 개발자 도구 또는 "소스 보기" 기능을 사용하여 볼 수 있고 편집할 수 있다.

※ 보안의 한 형태로 숨겨진 입력을 사용하지 않는다.

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_hidden 

■ Input Type Month

▶ <input type="month">는 사용자가 월과 연도를 선택할 수 있도록 한다.

▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_month 

■ Input Type Number

▶ <input type="number">는 숫자 입력 필드를 정의한다.

▶ 허용되는 번호에 대한 제한을 설정할 수도 있다.

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number 

■ Input 제한

▶ 아래에 항목은 몇 가지 일반적인 입력 제한 목록이다.

▷ checked : 페이지가 로드될 때 입력 필드가 미리 선택되도록 지정한다. (type="checkbox" 또는 type="radio"의 경우 해당)

▷ disabled : 입력 필드를 비활성화하도록 지정한다.

▷ max : 입력 필드의 최대값을 지정한다.

▷ maxlength : 입력 필드의 최대 문자 수를 지정한다.

▷ min : 입력 필드의 최소값을 지정한다.

▷ pattern : 입력 값을 확인할 정규식을 지정한다.

▷ readonly : 입력 필드가 읽기 전용임을 지정한다. (값 변경 불가)

▷ required : 입력 필드가 필수임을 지정한다.

▷ size : 입력 필드의 너비(문자)를 지정한다.

▷ step : 입력 필드의 유효한 숫자 간격을 지정한다.

▷ value : 입력 필드의 기본값을 지정한다.

■ Input Type Range

▶ <input type="range">는 슬라이더 컨트롤과 같이 정확한 값이 중요하지 않은 숫자를 입력하기 위한 컨트롤을 정의한다.

▶ 기본 범위는 0 ~ 100이다.

▶ 최소, 최대 및 단계 속성에 허용되는 숫자에 대한 제한을 설정할 수 있다.

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range 

■ Input Type Search

▶ <input type="search">는 검색 필드에 사용된다. (검색 필드는 일반 텍스트 필드처럼 동작)

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_search 

■ Input Type Tel

▶ <input type="tel">은 전화번호를 포함해야 하는 입력 필드에 사용된다.

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_tel 

■ Input Type Time

▶ <input type="time">을 사용하면 사용자가 시간(시간대없음)을 선택할 수 있다.

▶ Browser 지원에 따라 시간 선택기가 입력 필드에 나타날 수 있다.

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_time 

■ Input Type Url

▶ <input type="url">은 URL 주소를 포함해야 하는 입력 필드에 사용된다.

▶ Browser 지원에 따라 URL 필드는 제출 시 자동으로 검증된 수 있다.

▶ 일부 스마트폰은 URL 유형을 인식하고 키보드에 ".com"을 추가하여 URL 입력과 일치시킨다.

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_url 

■ Input Type Week

▶ <input type="week">는 사용자가 주와 연도를 선택할 수 있도록 한다.

▶ Browser 지원에 따라 날짜 선택기가 입력 필드에 나타날 수 있다.

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_week 

출처 : https://www.w3schools.com/html/html_form_input_types.asp

■ HTML form 요소

▶ <form> : 사용자 입력에 대한 HTML 폼을 정의한다.

▶ <input> : 입력 컨트롤을 정의한다.

▶ <textarea> : 여러 줄의 입력 컨트롤을 정의한다.

▶ <label> : <input> 요소의 라벨을 정의한다.

▶ <fieldset> : 관련 요소를 양식으로 그룹화한다.

▶ <legend> : <fieldset> 요소의 표제를 정의한다.

▶ <select> : 드롭다운 목록을 정의한다.

▶ <optgroup> : 드롭다운 목록에서 관련 옵션 그룹으리 정의한다.

▶ <option> : 드롭다운 목록의 항목을 정의한다.

▶ <button> : 클릭가능한 버튼을 정의한다.

▶ <datalist> : 입력 컨트롤에 대해 미리 정의된 옵션 목록을 지정한다.

▶ <output> : 계산 결과를 정의한다.

▶ 다양한 HTML form 요소를 모두 설명한다.

■ HTML <form> 요소

▶ HTML <form> 요소는 다음 양식 요소 중 한 이상을 포함할 수 있다.

▷ <input>

▷ <label>

▷ <select>

▷ <textarea>

▷ <button>

▷ <fieldset>

▷ <legend>

▷ <datalist>

▷ <output>

▷ <option>

▷ <optgroup>

■ <input> 요소

▶ 가장 많이 사용되는 form 요소는 <input> 요소이다.

▶ <input> 요소는 "type" 속성에 따라 여러 방법으로 표시될 수 있다.

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_input 

■ <label> 요소

▶ <label> 요소는 여려 form 요소의 라벨을 정의한다.

▶ <label> 요소는 화면 판독기 사용자에게 유용하다.

▶ 사용자가 input 요소에 초점을 맞출 때 화면 판독기가 라벨을 소리내어 읽어주기 때문이다.

▶ <label> 요소는 또한 매우 작은 영역 (라디오 버튼 또는 확인란)을 클릭하는 데 어려움이 있는 사용자에게 도움이 된다.

▶ 사용자가 <label> 요소 내의 텍스트를 클릭하면 라디오 버튼/확인란이 토글되기 때문이다.

▶ <label> 태그의 "for" 속성은 <input> 요소의 "id" 속성과 같아야 함게 묶을 수 있다.

■ <select> 요소

▶ <select> 요소는 드롭다운 목록을 정의한다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select 

▶ <option> 요소는 선택할 수 있는 옵션을 정의한다.

▶ 기본적으로 드롭다운 목록의 첫 번재 항목이 선택된다.

▶ 사전 선택된 옵션을 정의하려면 선택한 <option> 속성을 option에 추가한다.

<option value="fiat" selected>Fiat</option>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_pre 

□ 보이는 값

▶"size" 속성을 사용하여 표시되는 값의 수를 지정한다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_size 

□ 다중 선택 허용

▶ "multiple" 속성을 사용하여 사용자가 둘 이상의 값을 선택할 수 있도록 한다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_multiple 

■ <textarea> 요소

▶ <textarea> 요소는 여러 줄 입력 필드(텍스트 영역)을 정의한다.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea 

▶ "row" 속성은 텍스트 영역에서 볼 수 있는 줄 수를 지정한다.

▶ "cols" 속성은 텍스트 영역의 가시적 너비를 지정한다.

▶ CSS를 사용하여 텍스트 영역의 크기를 정의할 수도 있다.

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea_style 

■ <button> 요소

▶ <button>요소는 클릭 가능한 버튼을 정의한다.

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

※ 항상 버튼 요소의 "type" 속성을 지정한다.

※ 다른 Browser는 버튼 요소에 대해 다른 기본 유형을 사용할 수 있다.

■ <fieldset>와 <legend> 요소

▶ <fieldset> 요소는 관련 데이터를 양식으로 그룹화하는 데 사용된다.

▶ <legend> 요소는 <fieldset> 요소에 대한 표제를 정의한다.

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_legend 

■ <datalist> 요소

▶ <datalist> 요소는 <input> 요소에 대해 사전 정의된 옵션 목록을 지정한다.

▶ 사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록을 볼 수 있다.

▶ <input> 요소의 "list" 속성은 <datalist> 요소의 "id" 속성을 참조해야 한다.

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist 

■ <output> 요소

▶ <output> 요소는 계산 결과를 나타낸다. (예 :스크립트에 의해 수행됨 )

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_output 

출처 : https://www.w3schools.com/html/html_form_elements.asp