- 입력 양식(폼): 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것으로 '폼'이라고도 한다. ex)로그인 창, 검색 창
▶︎ 폼 삽입하기
기본이 되는 제목과 본문, 단락과 줄바꿈 등의 태그 알아보기
웹에서 만나는 폼
하나의 웹페이지 안에서도 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼수 있는 요소는 모두 폼이라고 할 수 있다.
1. 사용자가 아이디와 비밀번호를 입력하고 [로그인]버튼을 클릭하면 입력한 정보는 웹 서버로 전송된다.
2. 그리고 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다.
3. 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동한다.따라서 텍스트 박스나 버튼 같은 폼 형태는 HTML태그로 만들지만, 폼에 입력한 사용자 정보는 ASP나 PHP,JSP 같은 서버 프로그래밍을 이용해 처리한다.
<form>폼을 만드는 </form>
<form [속성="속성값"]>여러 폼 요소</form><form>태그는 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정한다.
♦︎ method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지를 지정한다.
method에서 사용할 수 있는 속성값은 get과 post가 있다.
♢ get: 데이터를 256~4,096byte까지만 서버로 넘길 수 있다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다.
♢ post: 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않는다.
♦︎ name: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
♦︎ action:
<form>태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.♦︎ target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
※ 자동 완성 기능을 나타내는 autocomplete 속성(기본 속성값은 "on")
<form action="" autocomplete="off">
</form> <fieldset>폼 요소를 그룹으로 묶는 </fieldset>
: 하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset>태그를 사용한다.
<fieldset [속성="속성값"]> </fieldset> <legend> fieldset 태그로 묶은 그룹에 제목을 붙이는</legend>
: 하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset>태그를 사용한다.
<fieldset>
<legend> 그룹 이름 </legend>
</fieldset> <label>폼 요소에 레이블을 붙이는</label>
:<label>태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.
레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말한다.
<label>태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.
ex. 아이디라는 텍스트와 입력란을 묶어 본다.
<label> 아이디 <input type="text"></label> //태그 안에 폼 요소를 넣는 것.
ex.label태그와 폼 요소를 따로 사용하고 label태그의 for 속성과 폼 요소의 id속성을 이용해 서로 연결하는 것.
<label for="id명"> 레이블명 <input id="id명"></label>▶︎ 사용자 입력을 위한 input 태그
아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input>태그를 이용해 넣는다.
☞ <input> 태그의 type 속성 한눈에 살펴보기
♦︎ text: 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣는다.
♦︎ password: 비밀번호를 입력할 수 있는 필드를 넣는다.
♦︎ search: 검색할 때 입력하는 필드를 넣는다.
♦︎ url: URL 주소를 입력할 수 있는 필드를 넣는다.
♦︎ email: 이메일 주소를 입력할 수 있는 필드를 넣는다.
♦︎ tel: 전화번호를 입력할 수 있는 필드를 넣는다.
♦︎ checkbox: 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크박스를 넣는다.
♦︎ radio: 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
♦︎ number: 숫자를 조절할 수 있는 스핀 박스를 넣는다.
♦︎ range: 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
♦︎ date: 사용자 지역을 기준으로 날짜(연,월, 일)을 넣는다.
♦︎ month: 사용자 지역을 기준으로 날짜(연,월)을 넣는다.
♦︎ week: 사용자 지역을 기준으로 날짜(연,주)를 넣는다.
♦︎ time: 사용자 지역을 기준으로 시간(시,분,초,분할 초)를 넣는다.
♦︎ datetime: 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣는다.
♦︎ datetime-local: 사용자가 있는 지역을 기준으로 날짜와 시간(연,월,일,시,분,초,분할 초)을 넣는다.
♦︎ submit: 전송 버튼을 넣는다.
♦︎ reset: 리셋 버튼을 넣는다.
♦︎ image: submit 버튼 대신 사용할 이미지를 넣는다.
♦︎ button: 일반 버튼을 넣는다.
♦︎ file: 파일을 첨부할 수 있는 버튼을 넣는다.
♦︎ hidden: 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다.
텍스트와 비밀번호를 나타내는 type="text" 와 type="password"
:텍스트 필드는 폼에서 가장 많이 사용하는 요소, 주로 아이디나 이름, 주소 등 한 줄짜리 일반 텍스트를 입력할 때 사용한다. 비밀번호 필드는 입력하는 내용을 화면에 보여 주지 않아야 하므로 '*'나 '●'로 표시한다. 이 점만 제외하면 텍스트 필드와 똑같이 동작하고 같은 속성을 사용한다.
<input type="text">
<input type="password">👉 텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성
♦︎ size: 텍스트와 비밀번호 필드의 길이를 지정한다. 즉 화면에 몇 글자가 보이도록 할 것인지를 지정한다.
♦︎ value: 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용, 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다. 비밀번호 필드에서 사용하지 않는다.
♦︎ maxlength: 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다.
다양한 용도에 맞게 입력하는 type="search", type="url", type="email", type="tel"
■ type="search" : 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다.
■ type="url" : 웹 주소를 입력하는 필드.
■ type="email" : 이메일 주소를 입력하는 필드.
■ type="tel" : 전화번호를 나타내는 필드.
체크 박스와 라디오 버튼을 나타내는 type="checkbox", type="radio"
여러 항목중에서 원하는 항목을 선택할 때 사용하는 폼 요소.
👉 체크 박스와 라디오 버튼에서 사용하는 주요 속성
♦︎ value: 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다. 이 값은 영문이거나 숫자여야 하며 필수 속성이다.
♦︎ checked: 체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다. 속성값은 따로 없다.
숫자 입력 필드를 나타내는 type="number", type="range"
텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만 type="number"를 사용하면 스핀박스가 나타나면서 숫자를 선택할 수 있다. 그리고 type="range"는 슬라이드 막대를 움직여 숫자를 입력할 수 있다.
👉 숫자 입력 필드에서 사용하는 속성
♦︎ min: 필드에 입력할 수 있는 최소값을 지정한다. 기본 최소값은 0이다.
♦︎ max: 필드에 입력할 수 있는 최대값을 지정한다. 기본 최대값은 100이다.
♦︎ step: 숫자 간격을 지정할 수 있다. 기본값은 1이다.
♦︎ value: 필드에 표시할 초기값.
날짜 입력을 나타내는 type="date", type="month", type="week"
♦︎ type="date": 달력에서 날짜를 선택해서 입력할 수 있다. "yyyy-mm-dd"형식
♦︎ type="month": 달력에서 월을 선택해서 입력할 수 있다. "yyyy-mm"형식
♦︎ type="week": 달력에서 주를 선택해서 입력할 수 있다.
시간 입력을 나타내는 type="time", type="datetime", type="datetime-local"
시간을 지정할 때는 type="time"을 사용하고 날짜와 시간을 함께 지정하려면 type="date time"이나 type="datetime-local"을 사용한다.
전송, 리셋 버튼을 나타내는 type="submit", type="reset"
전송 버튼을 나타내는 submit은 폼에 입력한 정보를 서버로 전송한다. submit 버튼으로 전송된 정보는 <form>태그의 action속성에서 지정한 폼 처리 프로그램에 넘겨진다. 반면에 reset 버튼은 <input>요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다. 그리고 이때 value속성을 사용해서 버튼에 표시할 내용을 지정한다.
이미지 버튼을 나타내는 type="image"
type="image"는 submit 버튼과 같은 기능을 하는 이미지버튼을 나타낸다.
<input type="image" src="이미지 경로" alt="대체 텍스트">기본 버튼을 나타내는 type="button"
type="button"은 submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 형태만 삽입한다. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용한다.
<input type="button" value="버튼에 표시할 내용">파일을 첨부할 때 사용하는 type="file"
간혹 폼에서 사진이나 문서를 첨부해야 하는 경우가 있다. 이럴 땐 type="file"로 지정하면 폼에 파일을 첨부할 수 있다.
<input type="file">히든 필드 만들 때 사용하는 type="hidden"
히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소. 사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력한다.
<input type="hidden" name="이름" value="서버로 넘길 값">▶︎ input 태그의 주요 속성
자동으로 입력 커서를 갖다 놓는 autofocus 속성
autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.
<input type=텍스트-입력-필드 autofocus required>힌트를 표시해 주는 placeholder 속성
사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. 이렇게 하면 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어서 편리하다.
읽기 전용 필드를 만들어 주는 readonly 속성
사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수도 있다. readonly속성은 해당 필드를 읽기 전용으로 바꾼다. 텍스트 필드나 텍스트 영역에 내용이 표시되어 있어도 사용자는 그 내용을 볼 수만 있고 입력은 할 수 없다.
readonly 속성은 간단히 readonly라고만 쓰거나 readonly="readonly", 또는 readonly="true"로 지정한다.
<input type=텍스트-입력-필드 readonly>필수 입력 필드를 지정하는 required 속성
내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 한다. 이렇게 반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있다. 이 속성을 사용하려면 required="required"라고 지정하거나 required라고만 해도 된다.
▶︎ 폼에서 사용하는 여러 가지 태그
여러 줄을 입력하는 텍스트 영역 textarea 태그
폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있다.이 영역을 텍스트 영역이라고 하며,
<textarea> 태그는 게시판에서 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.
<textarea> 내용 </textarea>👉 <textarea> 태그의 속성
♦︎ cols: 텍스트 영역의 가로 너비를 문자 단위로 지정한다.
♦︎ rows: 텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.
드롭다운 목록을 만들어 주는 <select>,<option> 태그
드롭다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐져서 붙인 이름이다. <select>태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option>태그를 사용해 원하는 항목을 추가, <option>태그에는 value속성을 이용해 서버로 넘겨주는 값을 지정한다.
<select>
<option value="값1"> 내용1 </option>
<option value="값2"> 내용2 </option>
.....
</select>👉 <select> 태그의 속성
♦︎ size: 화면에 표시할 드롭다운 항목의 개수를 지정한다.
♦︎ multiple: 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다.
👉 <option> 태그의 속성
♦︎ value: 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다.
♦︎ selected: 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정한다.
데이터 목록 만들어 주는 <datalist>,<option> 태그
데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값중에서 선택할 수 있다. 데이터 목록을 만들 때는 <datalist>태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시한다. 이때 value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다. 그리고 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id값을 지정하면 된다.
<input type="text" list="데이터 목록 id">
<datalist id="데이터 목록 id">
<option value="서버로 넘길 값1"> 선택 옵션1 </option>
<option value="서버로 넘길 값2"> 선택 옵션2 </option>
</datalist>버튼을 만들어 주는 <button> 태그
<button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다.
<button type="submit"> 내용 </button>
<button type="reset"> 내용 </button>
<button type="button"> 내용 </button>👉 <button> 태그의 type 속성
♦︎ submit: 폼을 서버로 전송한다.
<input type="submit">과 같은 기능을 한다.♦︎ reset: 폼에 입력한 내용을 초기화한다.
<input type="reset">과 같은 기능을 한다.♦︎ button: 버튼 형태만 만들 뿐 자체 기능은 없다.
<input type="button">과 같은 기능을 한다.
🙂 나의 뇌야. 기억해주렴.ㅋ
야금야금. 즐겁게, 개발 🙂