Tag - form 관련 2
<input> 태그 - 사용자의 입력값을 받는 태그
<input> 태그는 사용자의 입력을 받는 아주 중요한 태그다.
<input>를 이용하면 로그인, 이메일 외에 체크박스 등으로 고객 입력 자료를 다양한 경로로 입력 받을 수 있다.
<input> 태그들의 type속성
<input> 태그들을 잘 써주려면 type속성을 잘 지정해주어야 한다.
<body>
<fieldset>
<input type="text" id="text"> <!-- 텍스트 입력받기 -->
<input type="hidden" id="hidden"> <!-- 사용자에게 보이지 않는 정보 서버 전달 -->
<input type="search" id="search"> <!-- 검색 상자를 넣음 -->
<input type="tel" id="tel"> <!-- 전화 입력필드를 넣음 -->
<input type="url" id="url"> <!-- URL 입력필드를 넣음 -->
<input type="email" id="email"> <!-- 메일주소 입력필드를 넣음 -->
<input type="password" id="password"> <!-- 비밀번호를 입력필드를 넣음 -->
<input type="number" id="number"> <!-- 숫자 조절 가능 화살표를 넣음 -->
<input type="range" id="range"> <!-- 숫자 조절 가능 슬라이드를 넣음 -->
<input type="checkbox" id="checkbox"> <!-- 2개 이상 항목 선택 가능 체크박스 넣음 -->
<input type="radio" id="radio"> <!-- 항목 중 1개만 선택 가능한 라디오 버튼 넣음 -->
<input type="submit" id="submit"> <!-- 서버 전송 버튼 넣음 -->
<input type="submit" id="image"> <!-- 서버 전송 버튼 대신할 이미지를 넣음 -->
<input type="file" id="file"> <!-- 파일 첨부 버튼 넣음 -->
<input type="reset" id="reset"> <!-- 리셋 버튼 넣음 -->
<input type="button" id="button"> <!-- 버튼을 넣음 -->
</fieldset>
</body>
<input> 태그들의 다양한 속성
<input> 태그는 모양뿐 아니라 다양한 속성을 가졌다.
<body>
<fieldset>
<input type="text" id="" autofocus><br>
<!-- 입력 커서 미리 표시하기 -->
<input type="text" id="" placeholder="아이디"><br>
<!-- 힌트 표시하기. 미리 입력창에 텍스트 띄워놓기 -->
<input type="text" id="" readonly><br>
<!-- readonly 읽기 전용 필드 만들기. 필드 안의 내용을 삭제, 수정 불가 -->
<input type="text" id="" required><br>
<!-- required 필수필드 지정. required가 있으면 무조건 내용을 채워야 한다. -->
<input type="number" id="" max="100" min="5" step="5"><br>
<!-- max는 최대값, min은 최소값, step은 한번 선택에 늘어나는 값 -->
<input type="text" id="" size="10"><br>
<!-- 한 필드 안에서 보여지는 최대 글자 수. 입력이 아님 -->
<input type="text" id="" minlength="5", maxlength="10"><br>
<!-- maxlength는 입력 가능 최대 글자수 , minlength는 입력 가능 최소 글자수 -->
</fieldset>
</body>
그 외엔 다음 속성을 가졌다.
|
속성 |
설명 |
|
formaction |
실행할 프로그램을 연결. 'type'가 'submit' 또는 'image'일 때만 사용 가능. |
|
formenctype |
서버로 폼을 전송했을 때 폼 데이터를 어떤 식으로 해석할 것인지 지정. 'type'가 'submit' 또는 'image'일 때만 사용 가능. |
|
formmethod |
서버로 폼을 저장하는 방식(get, post 등)을 지정함. 이미 <form>에서 지정했어도 그 방식을 무시하고 우선함. |
|
formnovalidate |
<form> 태그 안에 novalidate라는 속성이 있어서 서버로 전송할 때 폼 데이터가 유효(validate)한지 여부를 표시할 수 있다. 이 속성을 이용하면 이를 <input> 태그 안에서도 표시 가능하다. |
|
formtarget |
폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정합니다. |
|
height, width |
'type'가 'image'일 때 이미지의 너비와 높이를 지정한다. |
|
list |
<datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여준다. |
|
multiple |
'type'이 'email' 또는 'file'일 때 두 개 이상의 값을 입력한다. |
<button> 태그 이용하기
<button>태그는 얼핏 보면 <input>태그의 'button' 속성과 같아 보인다.
하지만 <input>태그가 빈태그인데 반해 button은 일반적인 태그의 형태를 가진다.
그래서 태그와 태그 사이 즉 <button></button> 사이에 이미지, 텍스트를 넣을 수 있다.
그리고 가급적 양식 제출용 버튼이 아니라면 'type' 값을 'button'으로 하는 것을 잊지말자.
default 값이 submit이라서 잘못누르면 데이터가 다 날아간다.
| type | 설명 |
| submit | 버튼이 서버로 양식 데이터를 전송함. 지정하지 않은 경우 디폴트값임!!! 유효하지 않을 값일 때도 사용한다. |
| reset | 모든 컨트롤을 초기값으로 만듦. |
| button | 기본 행동 없음. 클라이언트 측 스크립트와 연결 가능 |