폼 생성 태그
<form [속성 = "값"]>
폼 요소
</form>- 속성
1) method 속성
· method = "get"
: 사용자가 입력한 내용을 그대로 노출한 채로 서버로 넘김
· method = "post"
: 사용자가 입력한 내용이 드러나지 않은 채로 서버로 넘김
2) action 속성
: <form> 태그 안의 내용들을 처리할 서버 상의 프로그램을 지정함
· URL
3) target = "_blank"
: 스크립트 파일을 현재 창이 아닌 다른 위치로 열도록 지정함
4) name = "폼 이름"
폼 요소 그룹화
<form>
<!-- 그룹으로 묶어 테두리 박스 생성 -->
<fieldset [속성 = "값"]>
<!-- 테두리 박스에 제목을 부여함 -->
<legend> 구역 제목 </legend>
폼 요소
</fieldset>
</form>
폼 요소 이름 부여
- 이름을 클릭했을 때 폼 요소가 자동으로 선택되도록 함
<!-- 방법 1 -->
<label> <input ~> 텍스트 </label>
<!-- 방법 2 -->
<label for = "아이디명"> 텍스트 </label>
<input ~ id = "아이디명">
값을 입력받는 <input> 태그
<input type = "유형" [속성 = "값"]>| <input> 태그의 속성 | |
| id = "아이디명" | - 폼 요소를 구분하기 위한 용도 |
| name = "key" | - 폼 내용을 서버로 보낼 때, 파라미터를 구분하는 기준이 됨 |
| value = "값" | - 초깃값 설정 - 서버로 보내질 때 value 값을 'name'이라는 이름으로 가져감 |
| autofocus | - 페이지를 불러왔을 때 해당 폼 요소가 먼저 선택되도록 함 |
| placeholder = "힌트" | - 입력되지 않은 폼 요소에 표시되는 힌트 |
| readonly | - 사용자가 값을 수정할 수 없게 함 (읽기 전용) |
| required | - 필수로 입력되어야 한다고 지정함 |
| min, max = "값" | - 최솟값, 최댓값 |
| step = "값" | - 허용된 범위 내의 숫자 간격 - 스핀박스를 움직이면 step의 배수로 움직임 |
| size = "값" | - 텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할지 |
| maxlength = "값" | - 입력 가능한 최대 글자 수 제한 |
| minlength = "값" | - 입력해야 할 최소 글자 수 제한 |
| disabled | - 값을 변경하지 못하게 함 |
# 텍스트 : type = "text"
- 속성 : name, size, maxlength, value
# 비밀번호 : type = "password"
- 사용자가 입력하는 내용이 *로 가려짐
- 속성 : name, size, maxlength
# 숫자 : type = "number"
- 속성 : min, max, value, step
- 박스 크기 조절 : CSS or min/max 속성 활용
# 범위 : type = "range"
- 슬라이드 막대를 이용하여 숫자를 입력함
- 속성 : min, max, value
# 라디오 버튼 : type = "radio"
- 여러 항목 중 하나만 선택할 경우 사용함
- 속성
1) name
· 각 항목의 name을 동일하게 설정해야 함
2) value
3) checked
· 기본으로 선택할 항목이 있는 경우 사용함
<!-- ul, li 태그를 이용해 라디오 버튼 항목 나열 -->
<ul>
<li> <label> <input type = "radio" name = "a"> 항목1 </label></li>
<li> <label> <input type = "radio" name = "a"> 항목1 </label></li>
<li> <label> <input type = "radio" name = "a"> 항목1 </label></li>
...
</ul>
# 체크 박스 : type = "checkbox"
- 여러 항목 중 하나 이상을 선택할 경우 사용함
- 속성 : name, value
<!-- ul, li 태그를 이용해 체크 박스 항목 나열 -->
<ul>
<li> <label> <input type = "checkbox" name = "n" value = "a"> 항목1 </label> </li>
<li> <label> <input type = "checkbox" name = "n" value = "b"> 항목2 </label> </li>
<li> <label> <input type = "checkbox" name = "n" value = "c"> 항목3 </label> </li>
</ul>
# 검색 창 : type = "search"
- 검색 창에 x 표시가 생겨, 검색어 삭제가 쉬워짐
# 사이트 주소 : type = "url"
- http://로 시작하는 사이트 주소 입력
# 이메일 주소 : type = "email"
- 메일 주소 형식인지 자동으로 체크함
# 전화번호 : type = "tel"
# 색상 : type = "color"
# 날짜 : type = "date" | "month" | "week"
- "date" : 날짜 선택
- "month" : 월, 연도 선택
- "week" : 주, 연도 선택
# 시간 : type = "time" | "datetime-local"
- "time"
→ value = "시:분"
- "datetime-local"
→ value = "연도-월-일T시:분"
- 속성 : min, max, step, value
# type = "hidden"
- 화면 상의 폼에는 보이지 않으며, 폼을 서버로 전송할 때 함께 전송됨
- 속성 : name, value
# type = "file"
- 파일을 첨부할 수 있도록 함
- 속성
· accept = "확장자 | MIME 타입" (파일 제한)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // 텍스트 파일만 <input type="file" accept="text/plain"/> // 이미지 파일만 <input type="file" accept="image/*"/> // html 파일만 <input type="file" accept="text/html"/> // 비디오 파일만 <input type="file" accept="video/*"/> // 오디오 파일만 <input type="file" accept="audio/*"/> // PDF 파일만 <input type="file" accept=".pdf"/> | cs |
여러 줄의 텍스트를 입력받는 태그
<textarea [cols = "가로길이"] [rows = "세로길이"] [name = "이름"] [placeholder = "힌트"]>
[기본내용]
</textarea>
# 사이즈를 변경하지 못하도록 고정
1 2 3 4 5 | <style> textarea { resize : none; } </style> | cs |
콤보 박스를 생성하는 태그
<select [name = "이름"] [id = "id명"] [multiple] [size = "크기"]>
<optgroup label = "그룹제목">
<option value = "값1"> 항목1 </option>
<option value = "값2" [selected]> 항목2 </option>
...
</optgroup>
</select>① <select> 태그
- multiple 속성
: [Ctrl]을 누르면 여러 개의 항목을 동시에 선택할 수 있음
- size 속성
: 콤보 박스에 몇 개의 항목이 보이게 할 것인지 결정
② <optgroup> 태그
: <option> 태그들을 묶어 그룹을 생성함 (생략 가능)
③ <option> 태그
- selected 속성
: 해당 옵션이 초깃값으로 선택되어 있도록 함
값을 선택하면 텍스트 필드에 입력되도록 하는 태그
<input type = "text" list = "데이터목록id">
<datalist id = "데이터목록id">
<option value = "값1" label = "항목명1"></option>
<option value = "값2" label = "항목명2"></option>
...
</datalist>
① <datalist> 태그
② <option> 태그
: option을 선택하면 해당 value 값이 텍스트 필드에 자동으로 입력됨
버튼을 생성하는 태그
# 자체 기능이 없는 단순 버튼
<!-- 방법 1 -->
<input type = "button">
<!-- 방법 2 -->
<button> 버튼명 </button>
<!-- 클릭 시 이벤트가 발생하는 버튼 -->
<button onclick = "이벤트"> 버튼명 </button># submit 기능이 있는 버튼
- 사용자가 입력한 내용을 서버로 전송하는 버튼
<!-- 방법 1 -->
<input type = "submit" value = "버튼명">
<!-- 방법 2-->
<button type = "submit"> 버튼명 </button>
<!-- 버튼에 이미지를 삽입함 -->
<input type = "image" src = "경로/파일.확장자" [alt = "대체텍스트"]># reset 기능이 있는 버튼
- 사용자가 입력한 내용을 전부 삭제하는 버튼
<!-- 방법 1 -->
<input type = "reset" value = "버튼명">
<!-- 방법 2 -->
<button type = "reset"> 버튼명 </button>
작업의 진행 상태를 나타내는 태그
<progress value = "진행상태" max = "총 작업량"> </progress>
- 속성
1) value : 작업의 진행 상태
· max 속성이 지정되지 않은 경우 : 0 ≤ value ≤ 1.0
· max 속성이 지정된 경우 : 0 ≤ value ≤ max
2) max : 총 작업량
전체 크기에서의 비중을 나타내는 태그
<meter value = "값" [min = "최솟값"] [max = "최댓값"]
[low = "낮은값"] [high = "높은값"] [optimum = "적당값"] >
</meter>
- 속성
1) value : min ~ max 범위 내에서 차지하는 값
2) low : 낮다고 판단할 정도의 값
→ low보다 value가 작으면 노란색으로 표시됨
3) high : 높다고 판단할 정도의 값
→ high보다 value가 크면 노란색으로 표시됨
4) optimum : 적당하다고 판단할 정도의 값
계산하는 태그
<!-- 예시 -->
<form oninput = "result.value = parseInt(num1.value) + parseInt(num2.value)">
<input type = "number" name = "num1" value = "0"> +
<input type = "number" name = "num2" value = "0"> =
<output name = "result" for = "num"> </output>
<!-- 또는 <input name = "result"> : 텍스트 박스 안에 결과가 표시 -->
</form>
기타 메모
- parseInt(x) : 문자를 정수로 변환하는 함수
'HTML & CSS' 카테고리의 다른 글
| [CSS] 선택자 (0) | 2023.02.05 |
|---|---|
| [CSS] 개요 (0) | 2023.02.05 |
| [HTML] 멀티미디어 태그 (0) | 2023.02.05 |
| [HTML] 이미지 태그 (0) | 2023.02.05 |
| [HTML] 링크 태그 (0) | 2023.02.05 |