※form의 요소 중 사용빈도가 높고 중요도도 높은 <button>과 <input>에 대해 알아보겠습니다.
button 태그와 input 태그의 가장 큰 차이점은 button은 스스로 닫지 않는 태그이고 input은 스스로 닫는 태그라는 것입니다.
그래서 <button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.
목차
1. BUTTON
<button> 태그는 클릭이 가능한 버튼 요소입니다. submit, reset, button 3가지 type을 가질 수 있습니다.
<button>은 다양한 용도로 사용되고 브라우저마다 다른 type을 기본값으로 사용하게 될 수도 있기 때문에 HTML 문서를 보고 <button>이 어떤 역할을 하는 것인지 한눈에 알기 어렵기 때문에 type은 습관적으로 명시해 주는 것이 좋습니다.
@<button type=" "> 속성
| type="submit" | 데이터를 제출하기 위한 버튼으로 지정한다. (기본값) |
| type="reset" | 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다. |
| type="button" | 버튼으로 지정한다. 클릭 이벤트 핸들러는 JavaScript로 직접 구현한다. |
2. INPUT
@<input type=" "> 속성
| type="submit" | <input>을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다. form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다. 버튼에 value 속성을 지정하면 <input>에 기본값(default value)로 표시된다. |
| type="reset" | <input>을 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다. |
| type="button" | <input>을 버튼으로 지정한다. |
| type="img" | <input>을 이미지버튼으로 지정한다. <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> |
| type="text" | <input>을 한 줄 입력 가능한 텍스트필드로 지정한다. input의 기본 type이다. size값을 지정하면 필드 너비가 자동조정된다. 기본 size값은 "20"이다. |
| type="search" | <input>을 검색필드로 지정한다. 일반적인 텍스트필드처럼 동작한다. |
| type="password" | <input>을 암호필드로 지정한다. 입력한 텍스트는 별표나 원으로 마스킹된다. |
| type="tel" | <input>을 전화번호 필드로 지정한다. pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"과 함께 사용해서 형식을 지정할 수 있다. |
| type="email" | <input>을 이메일을 포함해야하는 입력필드로 지정한다. 브라우저에 따라 제출 시 이메일 주소 유효성검사가 자동으로 이루어진다. 일부 스마트폰에서는 type="email"을 인식하고 키보드에 ".com"를 추가로 띄워준다. |
| type="url" | <input>을 URL주소를 포함해야하는 입력필드로 지정한다. |
| type="number" | <input>을 숫자 입력만 가능한 필드로 지정한다. min, max값을 지정하면 자릿수에 따라 필드 너비가 자동조정된다. (그림은 min="-10000"일 때) |
| type="range" | <input>을 슬라이드 컨트롤과 범위 내 숫자를 선택할 수 있는 컨트롤로 지정한다. 기본 범위는 0부터 100이고, min, max, step 속성을 추가로 지정할 수 있다. |
| type="radio" | <input>을 라디오버튼으로 지정한다. 선택지 중 단 하나의 항목만 선택할 수 있다. |
| type="checkbox" | <input>을 체크박스로 지정한다. 선택지 중 0개, 1개 또는 여러 개를 선택할 수 있다. |
| type="color" | <input>을 색상팔레트로 지정한다. value="#ff0000"과 같이 헥사코드로 기본값을 지정할 수 있다. |
| type="time" | <input>을 Time Picker로 지정한다. (no time zone) |
| type="date" | <input>을 Date Picker로 지정한다. min, max속성으로 날짜 범위를 지정하면 Date Picker 캘린더에 지정한 기간만 활성화된다. |
| type="datetime-local" | <input>을 Date Picker & 시간입력 필드로 지정한다. (no time zone) |
| type="week" | <input>을 Week Picker로 지정한다. |
| type="month" | <input>을 연도와 달을 Picker로 지정한다. |
| type="file" | <input>을 '파일선택 버튼'과 '선택된 파일 표시'로 지정한다. |
| type="hidden" | <input>을 숨겨진 입력필드로 지정한다. 사용자가 보거나 수정할 수 없는 데이터를 포함하는 용도로 사용한다. 개발자 도구에서보거나 편집할 수 있으므로 보안의 형태로 사용해서는 안된다. <input type="hidden" id="custId" name="custId" value="3487"> |
@<input form-*=" "> 속성
| form | <input>이 어느 <form>에 속하는지 지정한다. <input>의 form 속성과 <form>의 id 속성이 같아야 한다. <form action="/action_page.php" id="form1"> <input type="text" id="lname" name="lname" form="form1"> |
| formaction | type="submit", type="image"와 함께 쓰이며, 데이터 제출 시 데이터를 어디로 보낼지 적는다. <form>에서 지정한 action 속성보다 우선순위가 높다. <input type="submit" formaction="/action_page2.php" value="Submit as Admin"> |
| formenctype | type="submit", type="image"와 함께 쓰이며, POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다. <form>에서 지정한 enctype 속성보다 우선순위가 높다. <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> |
| formmethod | type="submit", type="image"와 함께 쓰이며, 데이터를 보낼 때 사용할 HTTP 메서드를 지정한다. <form>에서 지정한 method 속성보다 우선순위가 높다. <input type="submit" formmethod="post" value="Submit using POST"> |
| formtarget | type="submit", type="image"와 함께 쓰이며, form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다. <form>에서 지정한 target 속성보다 우선순위가 높다. <input type="submit" formtarget="_blank" value="Submit to a new window/tab"> |
@그 외 <input>이 가질 수 있는 속성
| name | <input>의 이름을 지정한다. name 속성은 JavaScript에서 요소나 제출된 데이터를 참조해올 때 사용한다. form을 제출할 때, name 속성이 있는 요소만 값이 전달된다. |
| value | <input>의 기본값을 지정한다. |
| placeholder |
<input>에 입력해야할 형식 샘플이나 간단한 설명을 힌트로 제공한다. |
| pattern | <input>의 입력값을 확인할 정규식을 지정한다. 예시 pattern="[A-Za-z]{3}" |
| required | <input>을 필수로 작성해야 한다고 지정한다. |
| max, min, step | <input>의 최댓값, 최솟값, 숫자간격을 지정한다. |
| maxlength, minlength | <input>의 최대, 최소 문자 수를 지정한다. |
| size | <input>의 너비 (문자)를 지정합니다 |
| readonly | <input>을 읽기전용으로 지정한다. form 제출 시 때 읽기전용 필드의 값도 전송된다. 읽기전용 필드는 수정은 되지 않지만, 그 외 사용자와 상호작용(드래그, 복사 등)은 할 수 있다. |
| disabled | <input>을 비활성화되도록 지정한다. |
| accept | <input type="file>에서 선택할 수 있는 파일확장자를 지정한다. |
| alt | <input type="img">에서 이미지의 대체 텍스트를 지정한다. |
| src | <input type="img">에서 사용할 이미지의 URL을 지정한다. |
| checked | type="checkbox", type="radio"과 함께 쓰이며, <input>의 기본(선택)값을 지정한다. |
| autocomplete | text, search, url, tel, email, password, datepickers, range, and color 타입과 함께 쓰이며, <input>에 자동완성기능 on/off 여부를 지정한다. on으로 지정할 경우 이전에 입력했던 값을 드랍다운으로 표시해준다. |
| autofocus | <input>이 페이지가 로드될 때 자동으로 포커스를 가지도록 한다. |
| dirname | <input>의 텍스트방향을 지정할 수 있다. dirname의 `속성.dir`은 name '속성'과 같아야 한다. (한글처럼 왼쪽에서 오른쪽으로 읽을지, 아랍어처럼 오른쪽에서 왼쪽으로 읽을지의 방향을 말한다.) |
| list | <input>에서 <datalist>에서 정의한 옵션을 사용한다. <input>의 list 속성과 <datalist>의 id 속성이 같아야 한다. |
| height, width | 입력 필드의 높이와 너비를 지정한다. |
| multiple | type="file", type="email"과 함께 쓰이며, 입력필드에 복수의 값을 입력할 수 있도록 지정한다. |
'HTML' 카테고리의 다른 글
| 비주얼스튜디오 코드(Visual Studio Code)의 FONT와 TEXT (0) | 2023.02.23 |
|---|---|
| 비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자) (0) | 2023.02.22 |
| 비주얼스튜디오 코드(Visual Studio Code)의 FORM (0) | 2023.02.20 |
| 비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크 (0) | 2023.02.19 |
| 비주얼스튜디오 코드(Visual Studio Code)의 LIST (0) | 2023.02.18 |