1. <select>, <optgroup>, <optiong> 태그 - 드롭다운 목록


공간을 최소화하면서 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다.


<select 속성="속성 값">

     <option value="값" [속성="속성 값"]> 내용1 </option>

     <option value="값" [속성="속성 값"]> 내용1 </option>

     <option value="값" [속성="속성 값"]> 내용1 </option>

     . . .

</select>


'<select> 태그'를 사용해 만든 드롭다운 목록은 기본적으로 한 가지 옵션이 표시되고 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 한가지 항목을 선택할 수 있는 데 <select> 태그에서 사용하는 속성은 다음과 같습니다.


속성 

설명 

size 

 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다. 

multiple 

 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl키를 누른 상태로 드롭다운메뉴에 있는 여러 항목을 선택할 수 있다. 


드롭다운 목록에 표시되는 옵션들은 '<option> 태그'를 이용해 지정하는데 <option> 태그에 사용하는 속성은 다음과 같습니다.


속성 

설명 

value 

 옵션을 선택했을 때 서버로 넘겨질 값을 지정한다. 

selected 

 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다. 


드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우, '<optgroup> 태그'를 사용할 수 있는데 label속성을 사용해 그룹의 제목을 붙입니다.



2. <datalist> 태그, <option> 태그


<select> 태그 대신 '<datalist> 태그'를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있습니다. 즉 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력되는 것입니다.


<input type="text" list="데이터 목록 id">

     <datalist id="데이터 목록 id">

     <option> . . . . . </option>

     <option> . . . . . </option>

     . . .

     </datalist>


'<option> 태그'를 사용해 각 데이터 옵션을 표시하고 value 속성과 label 속성을 사용할 수 있습니다.


 속성

설명 

value 

 사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정한다. 

label 

 사용자를 위해 브라우저에 표시할 레이블이다. 따로 지정하지 않을 경우, value 값을 레이블로 사용한다. 




3. <textarea> 태그 - 여러 줄 입력하는 텍스트 영역


게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용합니다.


<textarea [속성="속성 값"]> 내용 </textarea>


<textarea> 태그에서 사용하는 속성은 다음과 같습니다.


 속성

설명 

name 

 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다. 

cols 

 텍스트 영역의 가로 너비를 문자 단위로 지정한다. 

rows 

 텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다. 





<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

HTML5 시맨틱 태그  (0) 2017.04.20
[HTML 입문] 기타 폼 요소  (0) 2017.03.28
[HTML 입문] <input> 태그  (0) 2017.03.24
[HTML 입문] 폼을 만드는 기본적인 태그  (0) 2017.03.23
[HTML 입문] 링크 관련 태그  (0) 2017.03.22

<input> 태그란?


<input> 태그는 사용자가 내용을 입력하는 부분을 만들 때 사용합니다. 


<input type="유형" [속성="속성 값"]>


<input> 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 <input> 태그 안에 있는 type 속성을 이용해 구분합니다.


<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">
<input type="text" id="snumber">


폼을 만들다 보면 똑같은 폼 요소가 여러번 사용되는데, 이를 구분하기 위해 사용하는 것이 id 속성입니다. id를 지정해 놓으면 <label> 태그를 이용해 캡션을 붙일 수도 있고 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있습니다.




<input> 태그의 type 속성에서 사용 가능한 유형



유형 

설명 

hidden 

 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. 

text 

 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 만든다. 

search 

 검색 상자를 만든다. 

tel 

 전화번호 입력 필드를 만든다. 

url 

 URL 주소를 입력할 수 있는 필드를 만든다. 

email

 메일 주소를 입력할 수 있는 필드를 만든다. 

passweord 

 비밀번호를 입력할 수 있는 필드를 만든다. 

datetime 

 국제 표준시(URC>로 설정된 날짜와 시간을 넣는다.

datetime-local 

 사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다. 

date 

 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다. 

month 

 사용자 지역을 기준으로 날짜(연, 월)를 넣는다. 

week

 사용자 지역을 기준으로 날짜(연, 주)를 넣는다. 

time 

 사용자 니역을 기준으로 시간을 넣는다. 

number 

 숫자를 조절할 수 있는 화살표를 만든다.

range 

 숫자를 조절할 수 있는 슬라이드 막대를 만든다.

color 

 색상표를 넣는다. 

checkbox 

 주어진 항목에서 2개 이상 선택 가능한 체크박스를 만든다.

radio 

 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 만든다.

file 

 파일을 첨부할 수 있는 버튼을 만든다. 

submit 

 서버 전송 버튼을 만든다. 

image 

 submit 버튼 대신 사용할 이미지를 넣는다. 

reset 

 리셋 버튼을 만든다. 

button 

 버튼을 만든다. 




<input> 태그의 다양한 속성



속성

설명 

autofocus 

 페이지를 불러오자마자 원하는 폼의 요소에 입력 커서를 표시할 수 있다. 

placeholder

 입력란에 힌트 내용을 표시할 수 있다.

readonly 

 사용자에게 내용을 보여 주기만 하고 입력은 할 수 없게 한다. 

required 

 필수적으로 입력해야 하는 필드를 지정할 수 있다. 

min, max 

 해당 필드의 최솟값과 최댓값을 지정한다. 

step 

 허용된 범위 내의 숫자의 일정한 간격을 가리킨다. 

size

 한 줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할 지 지정한다. 

maxlength 

 사용자가 최대 몇 글자까지 입력할 수 있는지 지정한다. 

minlength 

 사용자가 최소 몇 글자 이상을 입력해야 하는지 지정한다. 

formaction

 실행할 프로그램을 연결한다. type="submit"이나 type="image"일 때 사용할 수 있다. 

formenctype

 서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정한다. type="submit"이나 type="image"일 때 사용할 수 있다. 

formmethod

 서버로 폼을 전송하는 방식을 지정한다. 이미 <form> 태그 안에서 지정한 방식이 있어도 그 방식 은 무시된다.

formnovalidate 

 서버로 전송할 때 폼 데이터가 유효(validate)한지 여부를 표시할 수 있다. 

formtarget 

 폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정한다. 

height, width 

 type="image"일 때 이미지의 너비와 높이를 지정한다. 

list 

 <datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여준다. 

multiple

 type="email"이나 type="file"일 때 두개 이상의 값을 입력한다. <input> 태그 안에 속성 이름만 표 시하면 된다. 




<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 기타 폼 요소  (0) 2017.03.28
[HTML 입문] 여러 데이터를 나열하는 태그  (0) 2017.03.27
[HTML 입문] 폼을 만드는 기본적인 태그  (0) 2017.03.23
[HTML 입문] 링크 관련 태그  (0) 2017.03.22
[HTML 입문] 이미지 관련 태그  (0) 2017.03.22


1. <form> 태그 - 폼 만들기


<form [속성="속성 값"]> 여러 폼 요소 </form>


<form> 태그에서 사용하는 속성들은 다음과 같습니다.


속성 

설명 

method 

 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄 지 지정한다.

속성 값

 get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 글자 수가 제한적이다. (256~4096byte)

 post - 사용자가 입력한 내용이 드러나지 않는다.

name

 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 폼의 이름을 지정한다.

action

 <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다. 

target

 <action> 태그에서 지정한 스크립트 파일을 현재 탭이 아닌 다른 위치에 열도록 지정한다. 

autocomplete

 자동 완성 기능. 기본 값은 "on"이다.



2. <label> 태그 - 폼 요소에 레이블 붙이기


레이블(label)이란 입력 창 옆에 붙여 놓은 텍스트를 말합니다.


<label [속성="속성 값"]> 레이블 <input ...> </label>


<label for="id이름">

     <input id="id이름" [속성="속성 값"]>

</label>


<label> 태그를 이용해 라디오 버튼이나 체크박스에 택스트(label)을 연결해 놓으면 텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 사용이 훨씬 쉽습니다.


<h3>수강 분야(다수 선택 가능)</h3> /* <label> 태그 사용안함 */
        <ul>
            <li>
                <input type="checkbox" value="grm">문법
            </li>
            <li>
                <input type="checkbox" value="wr">작문
            </li>
            <li>
                <input type="checkbox" value="rd">독해
            </li>
        </ul>
        <h3>수강 과목(1과목만 선택 가능)</h3> /* <label> 태그 사용 */
        <ul>
            <li>
                <label><input type="radio" name="subject" value="eng">영어회화</label>
            </li>
            <li>
                <label><input type="radio" name="subject" value="ch">중국어회화</label>
            </li>
            <li>                
                <label><input type="radio" name="subject" value="jp">일어회화</label>
            </li>
        </ul>



3. <fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기


<fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name">
                </li>
                <li>
                    <label for="mail">메일 주소</label>
                    <input type="text" id="mail">
                </li>
            </ul>
        </fieldset>     


<fildset> 태그는 폼들을 하나의 영역으로 묶고 외곽선을 그려 주고 <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여 줍니다.




<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 여러 데이터를 나열하는 태그  (0) 2017.03.27
[HTML 입문] <input> 태그  (0) 2017.03.24
[HTML 입문] 링크 관련 태그  (0) 2017.03.22
[HTML 입문] 이미지 관련 태그  (0) 2017.03.22
[HTML 입문] 텍스트 관련 태그 ②  (0) 2017.03.21

+ Recent posts

티스토리툴바