HTML Form Elements

글 작성자: juyoungit

<input>

가장 많이 사용되는 form elements 중 하나이다.

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

<!DOCTYPE html>
<html>
<body>

<h2>The input Element</h2>

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

</body>
</html>

위의 코드에 대한 결과를 함께 살펴보면

다음과 같이 type에 따라서 표시되는 형태가 다르게 나타나는 것을 확인할 수 있다.

(type 속성을 따로 명시하지 않는 경우 기본값인 text로 type이 지정된다.)

<label>

<label> 태그는 많은 폼 요소에 대한 레이블을 정의한다.

화면판독기(Screen Reader)에서 사용자가 입력요소에

<label>요소는 화면 판독기(Screen Reader) 사용자에게 유용합니다.

화면 판독기는 사용자가 입력 요소에 초점을 맞출 때 라벨을 크게 읽습니다.

이 <label>요소는 라디오 단추 나 확인란과 같은 매우 작은 영역을 클릭하기 어려운 사용자에게도 도움이됩니다. <label>요소 내의 텍스트를 클릭 하면 라디오 단추 / 확인란이 전환 되기 때문 입니다.

for의 속성 <label>태그는 같아야 id의 속성 <input> 들을 함께 바인딩 요소.

<select>

select 요소는 드롭다운목록(drop-down list)을 지원한다.

드롭다운목록이 무엇인지 잘 와닿지 않을 텐데 이는 실행결과를 보면 바로 이해될 것이다.

<!DOCTYPE html>
<html>
<body>

<h2>가장 좋아하는 캐릭터 고르기</h2>

<p>다음 리스트에서 가장 좋아하는 캐릭터를 선택하세요.</p>

<form action="form_ok.php">
  <label for="cars">가장 좋아하는 캐릭터 : </label>
  <select id="cars" name="캐릭터">
    <option value="라이언">라이언</option>
    <option value="브라운">브라운</option>
    <option value="네오">네오</option>
    <option value="프로도">프로도</option>
  </select>
  <input type="submit">
</form>

</body>
</html>

위의 코드에 대한 실행결과는 다음과 같다.

실행결과, select를 이용하여 생성한 드롭다운목록을 확인할 수 있다.

다음의 실행결과를 통해서 드롭다운 목록(drop-down list)가 무엇인지 이해가 되었을 것이다.

<option>

option 요소는 선택할 수 있는 옵션을 정의할 때 사용한다.

select 속성을 알아보면서 드롭다운목록을 보았는데 드롭다운목록의 각 옵션하나하나가 모두 option 속성을 이용해서 정의되었다.

페이지를 실행해보면 알겠지만 드롭다운목록에서 옵션을 선택하기 이전에 특정옵션이 미리 선택되어 있는데

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

미리선택된 옵션을 특정 원하는 옵션으로 정의하려면 옵션에 selected 속성을 추가하면 된다.

다음과 같이 코드를 사용한 경우(이전 예시코드와 전체적인 내용이 동일한 코드이다.)

미리선택된 옵션을 변경하여서 이전예제와 약간 다른 실행결과를 얻을 수 있다.

<!DOCTYPE html>
<html>
<body>

<h2>가장 좋아하는 캐릭터 고르기</h2>

<p>다음 리스트에서 가장 좋아하는 캐릭터를 선택하세요.</p>

<form action="form_ok.php">
  <label for="cars">가장 좋아하는 캐릭터 : </label>
  <select id="cars" name="캐릭터">
    <option value="라이언">라이언</option>
    <option value="브라운">브라운</option>
    <option value="네오" selected>네오</option>
    <option value="프로도">프로도</option>
  </select>
  <input type="submit">
</form>

</body>
</html>

(selected 속성을 추가한 위치를 잘 살펴보도록 하자)

위의 예시에서는 "네오"에 selected 옵션을 추가하였는데 다음과 같이 코드를 작성하고 이를 실행해보면 다음과 같이 결과가 나타난다.

첫번째 옵션인 라이언이 아닌 네오가 선택되어 있는 것을 확인할 수 있다.

Size

<!DOCTYPE html>
<html>
<body>

<h2>가장 좋아하는 캐릭터 고르기</h2>

<p>다음 리스트에서 가장 좋아하는 캐릭터를 선택하세요.</p>

<form action="form_ok.php">
  <label for="cars">가장 좋아하는 캐릭터 : </label>
  <select id="cars" name="캐릭터" size="2">
    <option value="라이언">라이언</option>
    <option value="브라운">브라운</option>
    <option value="네오">네오</option>
    <option value="프로도">프로도</option>
  </select>
  <input type="submit">
</form>

</body>
</html>

다음과 같이 size속성을 사용해서 한번에 보여지는 값의 수를 조정할 수 있다.

값의 수가 size 속성값보다 큰 경우 마우스를 스크롤하거나 키보드 방향키를 이용해서 다른 값들을 확인하고 선택할 수 있다.

multiple 속성

<!DOCTYPE html>
<html>
<body>

<h2>가장 좋아하는 캐릭터 고르기</h2>

<p>다음 리스트에서 가장 좋아하는 캐릭터를 선택하세요.</p>

<form action="form_ok.php">
  <label for="cars"> 가장 좋아하는 캐릭터 : </label>
  <select id="cars" name="캐릭터" size="4" multiple>
    <option value="라이언">라이언</option>
    <option value="브라운">브라운</option>
    <option value="네오">네오</option>
    <option value="프로도">프로도</option>
  </select>
  <input type="submit">
</form>

</body>
</html>

여기서 기억할 점은 2개 이상의 옵션을 선택하고 싶은 경우 mutiple 속성을 추가했다고 해서 그냥 클릭하면 되는 것이 아니다.

밑의 단락을 통해서 안내한 것처럼 윈도우 시스템의 경우 ctrl, 맥os 시스템의 경우 cmd 키를 누른 상태에서 키를 눌러줘야

2개 이상의 옵션/값을 선택할 수 있다. 잘 기억해두도록 하자.

<textarea>

여러줄의 텍스트 입력필드를 추가하고자 하는 경우 사용하는 요소이다.

활용예시는 다음과 같다.

<!DOCTYPE html>
<html>
<body>

<h2>Textarea</h2>
<h2>고객의견</h2>
<p>입력해주시는 내용은 서비스 개선에 반영됩니다.</p>

<form action="form_ok.php">
  <textarea name="message" rows="10" cols="30">메시지 입력...</textarea>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

위의 코드에서 textarea와 관련된 부분만 다시한 번 살펴보면

<form action="form_ok.php">
  <textarea name="message" rows="10" cols="30">메시지 입력...</textarea>
  <br><br>
  <input type="submit">
</form>

다음과 같이 rows, cols 속성이 존재하는 것을 확인할 수 있는데

rows 속성은 텍스트영역에서 표시되는 줄의 수를 지정하고

cols 속성은 텍스트 영역에서 보이는 너비를 지정한다.

또한 CSS를 사용해서 텍스트 영역의 크기를 정의할 수도 있다.

<form action="form_ok.php">
  <textarea name="message" style="width:300px;height:300px;">메시지 입력...</textarea>
  <br><br>
  <input type="submit">
</form>

다음과 같이 다양한 방법으로 textarea의 크기를 지정해주는 것이 가능하다.

<button>

클릭할 수 있는 버튼을 정의할 때 사용하는 요소이다.

<!DOCTYPE html>
<html>
<body>

<h2>The button Element</h2>
<p>버튼을 클릭해서 라이언을 응원해주세요!</p>

<button type="button" onclick="alert('응원해주셔서 감사합니다! - 라이언')">응원하기!</button>

</body>
</html>

button 요소를 정의할 때 항상 type 속성을 지정해줘야함을 기억하자.

웹브라우져마다 button 요소에 다른 기본유형을 사용할 수 있기 때문에 이를 잘 기억하고 있어야할 필요가 있다.

<fieldset>

웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용하는 요소 이다.

<fieldset> 요소는 html form 내에서 그룹을 만들 수 있으며 이를 통해서 보다 더 나은 시각화정보를 페이지에 구성할 수 있다.

<legend>

<fieldset> 요소에 의해 html form 내에 생성된 그룹의 설명을 제공하는데 사용하는 요소

fieldset, legend 요소를 코드에서 사용하기 위해서는 다음과 같이 코드를 구성해야 한다.

<form action="form_ok.php">
  <fieldset>
    <legend>사용자 이름 입력하기:</legend>
    <label for="fname">이름:</label><br>
    <input type="text" id="fname" name="fname" value="길동"><br>
    <label for="lname">성:</label><br>
    <input type="text" id="lname" name="lname" value="홍"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

다음과 같이 각 html form 요소들이 그룹화 된 것을 시각적으로 확인할 수 있다.

<datalist>

<datalist> 태그는 <input>요소에 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용한다.

<datalist> 요소는 사용자가 input 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운목록으로 보여줌으로서

자동완성기능을 제공하는 데 활용할 수 있다.

<input>요소의 list 속성값으로 <datalist>요소의 id 속성값을 명시하면 해당 <datalist> 요소에서 미리정의한 옵션들을

<input>요소에서 활용할 수 있다. 그러므로 아주 유용하게 사용할 수 있는 태그 중 하나이다.

<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>

<p>자신이 가장 좋아하는 캐릭터의 이름을 입력해주세요.</p>

<form action="form_ok.php">
  <input list="캐릭터" name="캐릭터">
  <datalist id="캐릭터">
    <option value="라이언">
    <option value="브라운">
    <option value="네오">
    <option value="프로도">
    <option value="어피치">
  </datalist>
  <input type="submit">
</form>

</body>
</html>

다음과 같이 코드를 작성하고 실행하면 다음의 결과를 확인할 수 있다.

최초 실행 시 모습(왼쪽), 입력하는 부분을 클릭하면 다음과 같이 미리 정의해둔 옵션값들이 리스트 형식으로 나타난다.

단, <datalist>는 구버전의 웹브라우져에서는 지원하지 않는 경우가 있으니 사용 시 해당사항을 고려해야할 필요가 있다.

<output>

<output>태그는 스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타낼 때 사용한다.

<!DOCTYPE html>
<html>
<body>

<h2>The output Element</h2>
<p>output elements를 통해서 계산결과가 출력됩니다.</p>

<form action="form_ok.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>

</body>
</html>

<output>태그가 사용된 부분만 보지말고 전체적으로 어떠한 방식으로 구성되었는 지 잘 살펴보도록 하자

슬라이드바를 통해서 값을 조절해주면 그 연산한 결과값이 오른쪽에 나타나는 것을 볼 수 있다.

단, <output>은 구버전의 웹브라우저에서 지원하지 않는 경우가 있으니 사용 시 해당사항을 잘 고려해야 한다.

지금까지의 내용을 정리해보면

태그(Tag)	정의하는 내용
<form>	사용자 입력을 위한 HTML form
<input>	입력 컨트롤
<textarea>	여러 줄의 텍스트 입력
<label>	<input>요소의 레이블
<fieldset>	관련된 요소들을 form에서 그룹화
<legend>	<fieldset>요소의 캡션을 정의
<select>	드롭다운 목록을 정의
<optgroup>	드롭다운 목록에서 관련 옵션 그룹을 정의
<option>	드롭다운 목록에서 옵션을 정의
<button>	클릭가능한 버튼을 정의
<datalist>	입력 컨트롤에 대한 사전 정의 된 옵션 목록을 지정
<output>	계산 결과

'Web Basic > HTML' 카테고리의 다른 글

HTML Multimedia(멀티미디어) (0)	2020.07.23
HTML input types(입력유형) (0)	2020.07.21
HTML forms (0)	2020.07.21
Block & Inline 요소 (0)	2020.07.20
Tables(표) & Lists(목록) (0)	2020.07.20

HTML Form Elements

<input>

<label>

<select>

<option>

Size

multiple 속성

<textarea>

<button>

<fieldset>

<legend>

<datalist>

<output>

'Web Basic > HTML' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

<input>

<label>

<select>

<option>

Size

multiple 속성

<textarea>

<button>

<fieldset>

<legend>

<datalist>

<output>

'Web Basic > HTML' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

HTML Multimedia(멀티미디어)

HTML input types(입력유형)

HTML forms

Block & Inline 요소

티스토리툴바