-
Tag - form 관련 2프론트엔드/HTML 2020. 8. 20. 03:17
<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
기본 행동 없음.
클라이언트 측 스크립트와 연결 가능'프론트엔드 > HTML' 카테고리의 다른 글
Tag - form 관련 3 (0) 2020.08.20 Tag - form 관련 (0) 2020.08.20 Tag - 링크 관련 (0) 2020.08.19 Tag - 이미지(image) 관련 (0) 2020.08.19 Tag - 테이블(table) 관련 4 (0) 2020.08.19