3주차 05-1 ~ 05-4
<<<<<<< HEAD
폼 삽입하기
폼은 알게모르게 웹 문서에서 자주 만난다. 특히 사용자의 의견이나 정보를 얻으려고 폼을 사용하는 경우가 많다.
웹에서 만나는 폼
웹 페이지 안에서도 여러 가지 폼을 사용한다. 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다.
사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭하면 입력한 정보는 웹 서버로 전송 된다. 그럼 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다. 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터 베이스를 기반으로 작동한다. 따라서 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만. 폼에 입력한 사용자 정보는 ASP나 PHP, JSP같은 서버 프로그래밍을 이용해 처리한다
<form>
폼을 만드는 가장 기본적인 태그
<form>과 </form>태그 사이에 여러 가지 폼 요소를 넣는다. - 기본형 <form [속성="속성값"]>여러 폼 요소</form>
<form>태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정한다
<form> 태그의 속성
method
사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. method에서 사용할 수 있는 속성값은 get과 post가 있다 - get : 데이터를 256 ~ 4,096byte 까지만 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다. - post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않는다.
name
자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다
action
<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
target
action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
### autocomplete
폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것을 자동 완성 기능이라고 한다. 사용자가 입력한 내용을 기억했다가 비슷한 글자가 입력되면 이전에 입력한 내용을 힌트로 보여준다.
<fieldset>, <legend>
하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset>태그를 사용한다
<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있다. =======
3주차 05-1 ~ 05-4
폼 삽입하기
폼은 알게모르게 웹 문서에서 자주 만난다. 특히 사용자의 의견이나 정보를 얻으려고 폼을 사용하는 경우가 많다.
웹에서 만나는 폼
웹 페이지 안에서도 여러 가지 폼을 사용한다. 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다.
사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭하면 입력한 정보는 웹 서버로 전송 된다. 그럼 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다. 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터 베이스를 기반으로 작동한다. 따라서 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만. 폼에 입력한 사용자 정보는 ASP나 PHP, JSP같은 서버 프로그래밍을 이용해 처리한다
<form>
폼을 만드는 가장 기본적인 태그
<form>과 </form>태그 사이에 여러 가지 폼 요소를 넣는다. - 기본형 <form [속성="속성값"]>여러 폼 요소</form>
<form>태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정한다
<form> 태그의 속성
method
사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. method에서 사용할 수 있는 속성값은 get과 post가 있다 - get : 데이터를 256 ~ 4,096byte 까지만 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다. - post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않는다.
name
자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다
action
<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
target
action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
### autocomplete
폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것을 자동 완성 기능이라고 한다. 사용자가 입력한 내용을 기억했다가 비슷한 글자가 입력되면 이전에 입력한 내용을 힌트로 보여준다.
<fieldset>, <legend>
하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset>태그를 사용한다
<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있다.
master
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<fieldset>
<legend>유저 정보</legend>
이름 : <input type="text"> <br>
id : <input type="text"><br>
passwd : <input type="text">
</fieldset>
<fieldset>
<legend>test</legend>
abcdefg
</fieldset>
</form>
</body>
</html><<<<<<< HEAD
=======
master
<label>
<label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다 레이블이란 입력란 가까기에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말한다. <lable>태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 웹 브라우저가 알수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
여러분의 나이대를 골라보세요.<br>
<input type="radio" name="ages" id="teen" value="teenage">
<!--<label for="teen">10대</label>--><br>
<input type="radio" name="ages" id="twenty" value="twenties">
<label for="twenty">20대</label><br>
<input type="radio" name="ages" id="thirty" value="thirties">
<label for="thirty">30대</label><br>
<input type="radio" name="ages" id="forty" value="forties">
<label for="forty">40대 이상</label><br>
<input type="submit">
</form>
</body>
</html><<<<<<< HEAD 
버튼을 클릭하지 않고 텍스트를 클릭해도 라벨로 이어져있어서 체크박스에 체크가 된다 =======
버튼을 클릭하지 않고 텍스트를 클릭해도 라벨로 이어져있어서 체크박스에 체크가 된다
master
<form>
<input type="checkbox" id="a1"><br>
<input type="checkbox" id="a2"><br>
<input type="checkbox" id="a3"><br>
<label><input type="checkbox">b1</label><br>
<label><input type="checkbox">b2</label><br>
<label><input type="checkbox">b3</label><br>
<label for="a1">a1</label><br>
<label for="a2">a2</label><br>
<label for="a3">a3</label><br>
</form><<<<<<< HEAD
<label>태그 안에 input태그를 넣으면 for 속성을 사용하지 않아도된다.
<input>
아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그를 이용해서 넣는다.
<input type=""> input태그에서 입력 형태를 지정할 때 type속성을 사용한다.
<input> 태그의 type 속성 종류
text
한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다.
password
비밀번호를 입력할 수 있는 필드를 넣는다.
serch
검색할 때 입력하는 필드를 넣는다.
url
URL 주소를 입력할 수 있는 필드를 넣는다.
email 주소를 입력할 수 있는 필드를 넣는다.
tel
전화번호를 입력할 수 있는 필드를 넣는다.
checkbox
주어진 여러 항목에서 2개 이상 선택할 수 있는 체크박스를 넣는다.
radio
주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
number
숫자를 조절할 수 있는 스핀박스를 넣는다.
range
숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
date
사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다.
month
사용자 지역을 기준으로 날짜(연, 월)를 넣는다.
week
사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
time
사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)를 넣는다.
datetime
국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣는다.
datetime-local
사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다.
submit
전송 버튼을 넣는다.
reset
리셋 버튼을 넣는다.
image
submit 버튼 대신 사용할 이미지를 넣는다.
button
일반 버튼을 넣는다.
file
파일을 첨부할 수 있는 버튼을 넣는다.
hidden
사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.
datetime 은 더이상 사용되지 않고 datetime-local사용을 권장함
text, password
텍스트 필드는 폼에서 가장 많이 사용하는 요소이다. 주로 아이디나 이름, 주소 등 한 줄짜리 일반 텍스트를 입력할 때 사용한다.
비밀번호 필드는 입력하는 내용을 화면에 보여 주지 않아야 하므로 '*'이나 '●'로 표시한다.
텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성
size
텍스트와 비밀번호 필드의 길이를 지정한다.
value
텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용이다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다.
maxlength
텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다.
```html
Document
```
passwd 타입에 value 속성을 적용하면 표시는 되지만 '●'로 표시된다.
search, url, email, tel
텍스트 필드는 한 줄짜리 일반 텍스트를 입력할 수 있다. 하지만 폼을 만들다 보면 텍스트 필드를 더 세분해야 할 때가 있다. 그래서 HTML5에서는 용도에 맞게 입력할 수 있는 텍스트 필드를 다양하게 제공한다.
search를 사용하면 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다
url은 웹 주소를 입력하는 필드이고 email은 이메일 주소를 입력하는 필드이다. HTML5 이전까지는 입력한 값이 이메일 주소인지, URL 주소인지 자바스크립트를 이용해서 직접 확인해야 했다. 하지만 HTML5 에서는 email처럼 이메일 주소 필드로 지정하기만 하면 웹 브라우저가 알아서 확인한다
checkbox, radio
체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소이다.
여러 항목을 선택하려면 체크박스를 사용하고, 하나의 항목만 선택하려면 라디오 버튼을 사용한다.
체크 박스와 라디오 버튼에서 사용할 수 있는 속성
value
선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다. 이 값은 영문이 거나 숫자여야 하며 필수 속성이다
checked
체크 박스나 라디오 버큰의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다.
number, range
텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만 number를 사용하면 스핀 박스가 나타나면서 숫자를 선택할 수 있다. range는 슬라이드 막대를 움직여 숫자를 입력할 수 있다.
숫자 입력 필드에서 사용하는 속성
min
필드에 입력할 수 있는 최솟값을 지정한다. 기본 최솟값은 0
max
필드에 입력할 수 있는 최댓값을 지정한다. 기본 최댓값은 100
step
숫자 간격을 지정할 수 있다. 기본은 1
value
필드에 표시할 초깃값
time, datatime, datatime-local
시간을 지정할 때는 time을 사용 날짜와 시간을 함께 지정하려면 datetime이나 datetime-local을 사용
submit, reset
submit은 폼에 입력한 정보를 서버로 전송한다. submit 버튼으로 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.
reset은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다. value속성을 이용해서 버튼에 표시할 내용을 지정할 수 있다. =======
<label>태그 안에 input태그를 넣으면 for 속성을 사용하지 않아도된다.
<input>
아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그를 이용해서 넣는다.
<input type=""> input태그에서 입력 형태를 지정할 때 type속성을 사용한다.
<input> 태그의 type 속성 종류
text
한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다.
password
비밀번호를 입력할 수 있는 필드를 넣는다.
serch
검색할 때 입력하는 필드를 넣는다.
url
URL 주소를 입력할 수 있는 필드를 넣는다.
email 주소를 입력할 수 있는 필드를 넣는다.
tel
전화번호를 입력할 수 있는 필드를 넣는다.
checkbox
주어진 여러 항목에서 2개 이상 선택할 수 있는 체크박스를 넣는다.
radio
주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
number
숫자를 조절할 수 있는 스핀박스를 넣는다.
range
숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
date
사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다.
month
사용자 지역을 기준으로 날짜(연, 월)를 넣는다.
week
사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
time
사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)를 넣는다.
datetime
국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣는다.
datetime-local
사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다.
submit
전송 버튼을 넣는다.
reset
리셋 버튼을 넣는다.
image
submit 버튼 대신 사용할 이미지를 넣는다.
button
일반 버튼을 넣는다.
file
파일을 첨부할 수 있는 버튼을 넣는다.
hidden
사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.
datetime 은 더이상 사용되지 않고 datetime-local사용을 권장함
text, password
텍스트 필드는 폼에서 가장 많이 사용하는 요소이다. 주로 아이디나 이름, 주소 등 한 줄짜리 일반 텍스트를 입력할 때 사용한다.
비밀번호 필드는 입력하는 내용을 화면에 보여 주지 않아야 하므로 '*'이나 '●'로 표시한다.
텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성
size
텍스트와 비밀번호 필드의 길이를 지정한다.
value
텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용이다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다.
maxlength
텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다.
```html
Document
```
passwd 타입에 value 속성을 적용하면 표시는 되지만 '●'로 표시된다.
search, url, email, tel
텍스트 필드는 한 줄짜리 일반 텍스트를 입력할 수 있다. 하지만 폼을 만들다 보면 텍스트 필드를 더 세분해야 할 때가 있다. 그래서 HTML5에서는 용도에 맞게 입력할 수 있는 텍스트 필드를 다양하게 제공한다.
search를 사용하면 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다
url은 웹 주소를 입력하는 필드이고 email은 이메일 주소를 입력하는 필드이다. HTML5 이전까지는 입력한 값이 이메일 주소인지, URL 주소인지 자바스크립트를 이용해서 직접 확인해야 했다. 하지만 HTML5 에서는 email처럼 이메일 주소 필드로 지정하기만 하면 웹 브라우저가 알아서 확인한다
checkbox, radio
체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소이다.
여러 항목을 선택하려면 체크박스를 사용하고, 하나의 항목만 선택하려면 라디오 버튼을 사용한다.
체크 박스와 라디오 버튼에서 사용할 수 있는 속성
value
선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다. 이 값은 영문이 거나 숫자여야 하며 필수 속성이다
checked
체크 박스나 라디오 버큰의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다.
number, range
텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만 number를 사용하면 스핀 박스가 나타나면서 숫자를 선택할 수 있다. range는 슬라이드 막대를 움직여 숫자를 입력할 수 있다.
숫자 입력 필드에서 사용하는 속성
min
필드에 입력할 수 있는 최솟값을 지정한다. 기본 최솟값은 0
max
필드에 입력할 수 있는 최댓값을 지정한다. 기본 최댓값은 100
step
숫자 간격을 지정할 수 있다. 기본은 1
value
필드에 표시할 초깃값
time, datatime, datatime-local
시간을 지정할 때는 time을 사용 날짜와 시간을 함께 지정하려면 datetime이나 datetime-local을 사용
submit, reset
submit은 폼에 입력한 정보를 서버로 전송한다. submit 버튼으로 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.
reset은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다. value속성을 이용해서 버튼에 표시할 내용을 지정할 수 있다.
master
<input type="reset" value="버튼에 표시할 내용">image
submit 버튼과 같은 기능을 하는 이미지 버튼
<input type="image" src="이미지 경로" alt="대체 텍스트">button
button은 submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 현태만 삽입한다.
주로 버튼을 클랙해서 자바스크립트를 실행할 때 사용한다.
value속성을 사용해 버튼에 표시할 내용을 지정할 수 있다.
<input type="button" value="버튼에 표시할 내용">file
폼에서 사진이나 문서를 첨부해야 하는 경우에 type을 file로 지정하면 폼에 파일을 첨부할 수 있다.
웹 브라우저 화면에 [파일선택] 이나 [찾아보기] 버튼 등이 표시되는데, 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.
hidden 타입
히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소
사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력
input 태그의 주요 속성
autofocus
autofocus 속성을 사용하면 페이지를 불러오자마라 폼에서 원하는 요소에 마우스 포인터를 표시 할 수 있다.
<input type="text" autofocus>placeholder
사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어서 편리하다.
<input type="text" placeholder="id" text-align="center"><br>
<input type="password" placeholder="password"><<<<<<< HEAD 
master
readonly
사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드로 만들 수 있다
텍스트 필드나 텍스트 영역에 내용이 표시되어 있어도 사용자는 그 내용을 볼 수만 있고 입력은 할 수 없다.
<input type="text" readonly>required
내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 한다.
반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있다.
<form>
<input type="text" required placeholder="id"><br>
<input type="text" required placeholder="password"><br>
<input type="submit">
</form><<<<<<< HEAD 
required 속성을 적용한 칸을 비워놓고 submit 버튼을 클릭하면 경고 메세지를 표시해준다. =======
master
required 속성을 적용한 칸을 비워놓고 submit 버튼을 클릭하면 경고 메세지를 표시해준다.
폼에서 사용하는 태그
<textarea>
폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있다.
게시판에 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.
<textarea>내용</textarea><<<<<<< HEAD 
<textarea>태그에서 너비 크기를 지정하는 cols 속성솨 화면에 텍스트를 몇줄 표시할지 지정하는 rows 속성을 사용한다. cols에서 지정하는 글자 수는 영문자를 기준으로 한다. 한글 1글자는 영문자 2글자에 해당하므로 cols="40" 으로 지정하면 한글은 20글자 정도가 된다
cols에서 지정하는 글자 수는 사용하는 글꼴이나 글자 크기에 따라 달라질 수 있어서 정확하게 크기를 지정할 수 없으므로 대략 그 정도의 크기를 지정하는 것이라고 생각하면 된다.
cols
텍스트 영역의 가로 너비를 문자 단위로 지정
rows
텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많이지면 스크롤 막대가 생긴다.
```html
<textarea cols="100" rows="20">내용</textarea>
=======
* \<textarea>태그에서 너비 크기를 지정하는 cols 속성솨 화면에 텍스트를 몇줄 표시할지 지정하는 rows 속성을 사용한다. cols에서 지정하는 글자 수는 영문자를 기준으로 한다. 한글 1글자는 영문자 2글자에 해당하므로 cols="40" 으로 지정하면 한글은 20글자 정도가 된다
* cols에서 지정하는 글자 수는 사용하는 글꼴이나 글자 크기에 따라 달라질 수 있어서 정확하게 크기를 지정할 수 없으므로 대략 그 정도의 크기를 지정하는 것이라고 생각하면 된다.
*
| 종류 | 설명 |
| :--------: | ----------------------------------------------------------- |
| cols | 텍스트 영역의 가로 너비를 문자 단위로 지정 |
| rows | 텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많이지면 스크롤 막대가 생긴다. |
| \`\`\`html | |내용
master
<select>, <option>
사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용한다.
드록다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐진다
드롭다운 목록은 <select> 태그와 <option> 태그를 이용해 표시한다.
<select>태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 원하는 항목을 추가한다.
<option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정한다.
<select>
<<<<<<< HEAD
<option>옵션1</option>
<option>옵션2</option>
<option>옵션3</option>
<option>옵션4</option>
<option>옵션5</option>
<option>옵션6</option>
</select>
<select> 속성
<select> 태그를 사용해 만든 드롭다운 목록은 기본적으로 옵션이 하나만 표시되는데, 옆에 있는 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 항목을 선택할 수 있다
이때 size 속성이나 multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절 할 수 있다.
<select> 태그 속성
size
화명에 표시할 드롭다운 항목의 개수를 지정
multiple
드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용
<option> 속성
드롭다운 목록에 표시되는 옵션은 <option> 태그를 이용해 지정한다
<option>태그 속성
value
해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다.
selected
드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정
<datalist>, <option>태그
데이터 목록을 사용하면 텍스트 필드 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다.
데이터 목록을 만들 때는 <datalist>태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시한다
value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데 이 값이 텍스트 필드에도 나타난다
데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id값을 지정하면 된다. =======옵션1옵션2옵션3옵션4옵션5옵션6
#### \<select> 속성
* \<select> 태그를 사용해 만든 드롭다운 목록은 기본적으로 옵션이 하나만 표시되는데, 옆에 있는 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 항목을 선택할 수 있다
* 이때 size 속성이나 multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절 할 수 있다.
* \<select> 태그 속성
*
| 종류 | 설명 |
| :------: | ---------------------------- |
| size | 화명에 표시할 드롭다운 항목의 개수를 지정 |
| multiple | 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용 |
#### \<option> 속성
* 드롭다운 목록에 표시되는 옵션은 \<option> 태그를 이용해 지정한다
* \<option>태그 속성
*
| 종류 | 설명 |
| :------: | ------------------------------------- |
| value | 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다. |
| selected | 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정 |
#### \<datalist>, \<option>태그
* 데이터 목록을 사용하면 텍스트 필드 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다.
* 데이터 목록을 만들 때는 \<datalist>태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 \<option> 태그를 사용해 각 데이터의 옵션을 표시한다
* value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데 이 값이 텍스트 필드에도 나타난다
* 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id값을 지정하면 된다.
>>>>>>> master
```html
<form>
<input type="text" id="asdf" list="minsu">
<datalist id="minsu">
<option value="option1">옵션1</option>
<option value="option2">옵션2</option>
<option value="option3">옵션3</option>
</datalist>
</form>
```
<<<<<<< HEAD
### \<button> 태그
- \<button> 태그의 type 속성은 버튼이 활성화 되었을때 어떤 동작을 할지 지정할 수 있다.
- submit, reset, button 중에서 선택할 수 있고 만약 지정하지 않으면 submit을 선택한 것으로 간주한다.
- \<button> 태그의 type 종류
-
|종류|설명|
|:---:|-----|
|submit|폼 서버로 전송|
|reset|폼에 입력한 내용을 초기화|
|button|버튼 형태만 만들 뿐 자체 기능은 없다|
=======
#### \<button> 태그
* \<button> 태그의 type 속성은 버튼이 활성화 되었을때 어떤 동작을 할지 지정할 수 있다.
* submit, reset, button 중에서 선택할 수 있고 만약 지정하지 않으면 submit을 선택한 것으로 간주한다.
* \<button> 태그의 type 종류
*
| 종류 | 설명 |
| :----: | --------------------- |
| submit | 폼 서버로 전송 |
| reset | 폼에 입력한 내용을 초기화 |
| button | 버튼 형태만 만들 뿐 자체 기능은 없다 |
>>>>>>> masterLast updated