[HTML] 폼 태그

폼 생성 태그

<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 타입" (파일 제한)

 

// 텍스트 파일만
<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"/>

      

 

여러 줄의 텍스트를 입력받는 태그

<textarea [cols = "가로길이"] [rows = "세로길이"] [name = "이름"] [placeholder = "힌트"]> 
[기본내용] 
</textarea>

#  사이즈를 변경하지 못하도록 고정

<style>
    textarea {
        resize : none;
    }
</style>

 

 

반응형

728x90

---

콤보 박스를 생성하는 태그

<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) : 문자를 정수로 변환하는 함수