목차
- <form> </form>
1-1. <form> 속성 action, method
1-2. method 속성의 get/post - <label> </label>
- <input> </input>
3-1. <form>~<label>~<input> 사용 예시
3-2. 속성 submit과 reset
3-3. 텍스트 관련 <input> 속성
3-4. 숫자 관련 <input> 속성
3-5. 날짜/시간 관련 <input> 속성
3-6. 속성 radio와 checkbox
3-7. 색상, 파일, 히든, 버튼 속성 - <button> </button>
- <fieldset>과 <legend>
5-1. <fieldset> </fieldset>
5-2. <legend> </legend> - <select>와 <option>
6-1. <select> </select>
6-2. <option> </option>
6-3. <select>~<option> 사용 예시 - <textarea> </textarea>
1. <form> </form>
- <form>은 HTML에서 사용자가 입력할 양식을 제공하는 태그이다.
사용자 입력 양식이란 예를 들면 로그인 시 또는 회원가입 시에 id와 pwd를 입력하도록 하는 일종의 형식들을 말한다.
- form 태그 내의 input 태그들을 통해 사용자가 입력하는 정보를 서버로 넘기는 역할을 수행한다.
1-1. <form> 속성 action, method
| action | 폼의 입력된 값을을 전송 받을 서버의 주소 지정 |
| method | get/post 방식으로 전송 방식을 지정 |
<form action="" method="get"></form>아직은 서버와의 연결을 배우지 않았기 때문에 당장 서버 주소를 지정하지는 못한다. action, method 속성은 서버와 연결 시 면밀히 알아볼 수 있을 것이다.
1-2. method 속성의 get/post
❗ 기본 속성값은 get이다. 따라서 method=""와 method="get"은 같은 결과를 보인다.
- method 속성의 "속성값" get/post는 대소문자 모두 허용된다.
- get 방식의 경우 제출(submit)이 이뤄졌을 때 url에 주소?name=value&name=value와 같이 데이터가 전송된다.
- 자주 쓰는 네이버를 예시로 보았을 때, 검색창은 get 방식을 취하고 로그인창의 아이디/비번은 post 방식을 따르고 있다.
2. <label> </label>
<label for="search">검색할 내용</label>- <label> 시작태그에서 for="속성값"을 명시하면, 라벨로 지정된 텍스트를 클릭했을 때에도 검색란에 포커스가 들어가 커서가 깜빡이는 모습을 확인할 수 있다.
3. <input> </input>
- <input>은 사용자로부터 데이터를 입력 받기 위한 태그이다.
3-1. <form>~<label>~<input> 사용 예시
❗ 'submit' 버튼을 누르면 <form> 태그의 action 속성에 지정된 서버 경로로 method 속성에서 지정한 방식에 맞춰 <form> 태그 내부에 있는 <input> 태그의 값이 전달된다.
<body>
<form action="" method="get">
<label for="search">검색할 내용</label>
<input type="text" size="20" name="search" id="search">
<input type="submit" value="검색">
</form>
</body>
3-2. 속성 submit과 reset
<input> 시작태그에 활용할 수 있는 속성은 다양하다. 일부 목록은 다음과 같다.
| type | 입력창의 타입을 결정하는 속성 (text, checkbox, radio, select 등) |
| value | input 요소의 기본값 표시 |
| name | input의 구별할 수 있는 명칭 |
| mix/max/step | 허용하는 범위(최소값/최대값/증감값) |
| autocomplete | 자동완성 기능 |
| width/height | 너비/높이 |
| readonly | 읽기전용 필드 |
| accept | 파일 타입에 대해 사용자에게 알려주는 기능 |
| multiple | 여러 개의 값을 입력 가능 |
| placeholder | 사용자 입력 전 입력창 표시글 |
| autofocus | 입력창 커서 표시 |
| required | 필수입력 필드로 지정 |
| list | <datalist>의 옵션값을 <input>안에 나열 |
| maxlength | 사용자가 입력할 수 있는 최대 글자수 제한 |
| minlength | 최소 입력 글자수 지정 |
| size | 화면에서 표시하는 글자수 |
| formaction | 실행할 프로그램 연결 |
| formenctype | 전송 시 어떤 방식으로 해석할지 지정 |
| formnovalidate | 전송 시 데이터 유효 여부를 표시 |
| formtarget | 서버의 응답을 어디에 표시할지 지정 |
| text | 한 줄짜리 텍스트 입력창 생성 |
| password | 비밀번호 입력창 ※ 입력 시 ⦁⦁⦁으로 표시됨 |
| hidden | 값을 넣을 수 있는 창 관리자에게 정보 전달 사용자에게 보이지는 않음 |
| button | 버튼 생성 ※ 자체 별도 기능은 없고, 스크립트에서 함수 연결에 활용 |
| checkbox | 체크박스 생성 |
| radio | 라디오 버튼 생성 |
| file | 파일 첨부 양식 출력 |
| image | 이미지 형태 생성 |
| submit | 입력한 데이터를 다른 페이지로 제출하는 기능 |
| reset | 입력한 내용을 일괄 초기화하는 기능 |
- name 속성은 서버로 가지고 넘어갈 key 값 그 자체를 의미한다. 즉 이 name을 통해 서버로부터 조회해올 수 있다.
A. type="submit"
입력된 데이터를 제출
<body>
<form action="" method="">
<input type="submit" value="제출">
</form>
</body>
B. type="reset"
입력 중인 내용을 일괄 리셋
<body>
<form action="" method="">
<input type="reset" value="다시 작성">
</form>
</body>
- <input> 태그는 인라인 형식을 따르기에 개행이 필요하다면 별도 작성이 요구된다: <br>
3-3. 텍스트 관련 <input> 속성
A. type="text"
한 줄 텍스트를 입력할 수 있는 텍스트 상자
<body>
<form action="" method="">
<label>아이디 : </label>
<input type="text" name="userid" size="20"
placeholder="아이디를 입력하세요" maxlength="15"
value="reminder">
</form>
</body>
value="reminder" 속성을 지우고 출력했을 때는 placeholder가 정상적으로 보여진다.
- 그러나 예시에서처럼 placeholder 속성과 value 속성이 동시에 작성되거든 value 속성값이 최종적으로 나타남을 알 수 있다. 사용자는 그 자리에 주어진 텍스트를 지우고 새롭게 입력할 수가 있다.
B. type="password"
비밀번호를 입력할 수 있는 텍스트 상자
<body>
<form action="" method="">
<label>비밀번호 : </label>
<input type="password" name="userpwd" size="20"
placeholder="비밀번호를 입력하세요" maxlength="15">
</form>
</body>
C. type="search"
검색 정보에 어울리는 기능을 제공하는 텍스트 상자
<body>
<form action="" method="">
<label>검색 : </label>
<input type="search" name="searchtext"
placeholder="검색할 내용 입력">
</form>
</body>
- 텍스트를 입력하면 오른편에 취소(x) 버튼이 생긴다.
D. type="url"
주소 URL에 어울리는 기능을 제공하는 텍스트 상자
<body>
<form action="" method="">
<label>홈페이지 : </label>
<input type="url" name="homepage" value="https://">
</form>
</body>
- value="https://"를 적용해 주소가 전달될 자리임을 명시할 수 있다.
- 이때 값을 입력하지 않고 제출(submit) 시도하면 예시에서처럼 'URL를 입력하세요.'라는 안내 문구가 뜬다. 즉 양식이 알맞게 채워졌는지 검토되고 있는 것이다.
E. type="email"
이메일에 어울리는 기능을 제공하는 텍스트 상자
<body>
<form action="" method="">
<label>이메일 : </label>
<input type="email" name="email"
placeholder="이메일을 입력">
</form>
</body>
- 입력을 마치지 않은 상태에서 제출(submit) 시도하거든 이메일 양식에 대한 확인이 진행돼 '이메일 주소에 '@'를 포함해 주세요. 'reminder'에 '@'가 없습니다.'라는 안내 문구가 출력된다.
F. type="tel"
전화번호에 어울리는 기능을 제공하는 텍스트 상자
<body>
<form action="" method="">
<label>전화번호 : </label>
<input type="tel" name="phone"
placeholder="전화번호를 입력">
</form>
</body>
3-4. 숫자 관련 <input> 속성
A. type="number"
스핀박스 통해 숫자 지정 가능
<body>
<form action="" method="">
<label>수량 : </label>
<input type="number" name="amount"
min="0" max="100" step="10" value="50">
</form>
</body>
- 브라우저에 따라 입력창 오른편에 위/아래 업다운 화살표 버튼인 스핀박스(spin box)가 표시된다.
- step 속성 통해 n씩 증감하도록 증감값을 설정할 수 있다.
B. type="range"
슬라이드바 통해 숫자 지정 가능
<body>
<form action="" method="">
<label>수량 : </label>
<input type="range" name="point"
min="0" max="100" value="50" step="10">
</form>
</body>
- 슬라이드바 통해 숫자를 지정한다.
- min 속성 통한 최소값, max만큼의 최대값, value라는 기본값, step 정도의 증감값을 설정할 수 있다.
3-5. 날짜/시간 관련 <input> 속성
A. type="date"
<body>
<form action="" method="">
<label>date : </label>
<input type="date" name="dateIn">
</form>
</body>
- 연도-월-일을 표현한다.
B. type="month"
<body>
<form action="" method="">
<label>month : </label>
<input type="month" name="monthIn">
</form>
</body>
- ----년 --월 형태로 선택할 수 있다.
C. type="week"
<body>
<form action="" method="">
<label>week : </label>
<input type="week" name="weekIn">
</form>
</body>
- 연도, --번째 주 형태로 보여준다.
D. type="time"
<body>
<form action="" method="">
<label>time : </label>
<input type="time" name="timeIn">
</form>
</body>
- 오전/오후를 구분하며, 시간의 경우 01~12까지의 숫자로 담긴다.
E. type="datetime-local"
<body>
<form action="" method="">
<label>datetime-local : </label>
<input type="datetime-local" name="dtlIn">
</form>
</body>
- 연도-월-일 오전/오후 00:00 형태로 보여준다.
- 오전/오후를 구분하며, 시간의 경우 01~12까지의 숫자로 쓴다.
3-6. 속성 radio와 checkbox
❗ 라디오 버튼 및 체크 박스로 제작하기 위해서는 name 속성값이 반드시 일치해야 한다.
❗ value 속성은 육안으로 확인할 수 있는 설정은 아니지만, value가 지정되어야 속성값 판단 후 서버로의 전달이 가능하다.
A. type="radio"
단일선택
<body>
<form action="" method="">
<input type="radio" id="female" name="gender" value="F" checked>
<label for="female">여자</label>
<input type="radio" id="male" name="gender" value="M">
<label for="male">남자</label>
</form>
</body>
- 라디오 버튼은 단일선택만 가능하다.
- <label> 태그에서 for="id값" 설정했기에 텍스트만 클릭해도 라디오 버튼에 반영되는 모습이다.
- checked로 명시된 "female" 값이 기본값으로 설정돼 있다.
B. type="checkbox"
다중선택
<body>
<form action="" method="">
<label>취미 : </label>
<input type="checkbox" id="baseball" name="hobby" value="baseball" checked>
<label for="baseball">야구</label>
<input type="checkbox" id="basketball" name="hobby" value="basketball">
<label for="basketball">농구</label>
<input type="checkbox" id="football" name="hobby" value="football">
<label for="football">축구</label>
</form>
</body>
- 체크 박스는 다중선택을 가능케 한다.
- <label> 태그에서 for="id값" 설정했기에 텍스트만 클릭해도 체크 박스에 반영되고 있다.
- checked로 명시된 "baseball" 값이 기본값으로 조회되는 모습이다.
3-7. 색상, 파일, 히든, 버튼 속성
A. type="color"
색상 선택
<body>
<form action="" method="">
<label>색상 선택 : </label>
<input type="color" name="color">
</form>
</body>
B. type="file"
업로드할 파일 선택
<body>
<form action="" method="">
<label>파일 선택 : </label>
<input type="file" name="uploadfile">
</form>
</body>
C. type="hidden"
숨김 처리
<body>
<form action="" method="">
<label>숨김 : </label>
<input type="hidden" name="hiddenvalue" value="1">
</form>
</body>
- value="1"을 전달했으나 출력되지는 않은 모습이다. 이처럼 hidden 속성은
사용자에게 보여지는 값이 아니라, 값을 넣을 수 있는 창 관리자에게 필요한 값을 작성할 때 활용된다.
D. type="button"
버튼 생성
<body>
<form action="" method="">
<input type="button" value="button">
</form>
</body>
- 버튼 자체로는 별도 기능이 없다. 스크립트에서 함수 연결에 활용할 수 있다.
4. <button> </button>
❗ <form> 태그 안에 속한 <button>의 기본 타입은 제출(submit)이다. 따라서 제출이 아닌 다른 용도로 버튼 기능을 활용하고자 할 때는 type="button"을 반드시 명시해야 한다.
<body>
<form action="" method="">
<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
</form>
</body>- <input> 태그의 button 속성 대신 <button>이라는 별도의 태그를 활용해 submit, reset, button을 생성할 수 있다.
5. <fieldset>과 <legend>
❗ <fieldset>과 <legend>는 그루핑(grouping)을 위해 사용하는 태그이다.
<body>
<form>
<fieldset>
<legend>필드셋의 제목을 작성하는 부분</legend>
<label>입력 1 : </label>
<input type="text"><br>
<label>입력 2: </label>
<input type="text"><br>
<label>입력 3 : </label>
<input type="text">
</fieldset>
<fieldset>
<legend>필드셋으로 묶은 영역별로 구분</legend>
<label>입력 1 : </label>
<input type="text"><br>
<label>입력 2: </label>
<input type="text"><br>
<label>입력 3 : </label>
<input type="text">
</fieldset>
</form>
</body>
- <legend> 태그 통해 각 <fieldset>별로 명칭이 작성된다.
- <input> 태그는 인라인 형식을 취하기에 별도 개행처리가 요구된다: <br>
5-1. <fieldset> </fieldset>
- <fieldset>은 폼 요소를 그룹으로 묶는 태그이다.
- <form>만 만들었을 때는 육안으로 확인할 수 있는 결과가 없었으나, <fieldset>을 작성하자 네모난 상자가 생겨난다.
- <form> 안에서 <fieldset> 여러 개 나열이 가능하다.
5-2. <legend> </legend>
- <legend>는 묶은 폼 요소에 명칭을 부여하는 태그이다.
6. <select>와 <option>
6-1. <select> </select>
| size | 화면에 표시될 항목 개수 지정 |
| multiple | 다중선택 지정 ※ ctrl + 다중 클릭해야 함 |
- <select> 태그에 쓰이는 속성으로는 위와 같은 것들이 있다.
- multiple 속성이 들어간 경우 ctrl + 다중 클릭 통해 여러 항목 선택이 가능하다.
6-2. <option> </option>
| value | 옵션 선택 시 넘겨질 값 |
| selected | 기본으로 선택할 값 |
- <option> 태그에 쓸 수 있는 속성으로 value와 selected가 있다.
6-3. <select>~<option> 사용 예시
<body>
<form action="" method="">
<label>국적 : </label>
<select name="nationality">
<option value="ko">한국</option>
<option value="ch">중국</option>
<option value="jp">일본</option>
<option value="etc" selected>기타</option>
</select>
</form>
</body>
- <option> 시작태그에서 지정한 value가 url에 표시된다: ?nationality=ko
- 만약
별도 value 속성값을 기재하지 않은 상황이라면 내부문자인 "한국"으로 전달된다: : ?nationality=한국 - selected를 쓰면 해당 <option>이 기본값으로 세팅된다.
7. <textarea> </textarea>
<body>
<form action="" method="">
<textarea cols="30" rows="10" required></textarea>
</form>
</body>
- <textarea>를 생성하면 오른쪽 하단에 활성화된 표시를 당겨 입력란 크기를 늘이거나 줄일 수 있다.
- required는 반드시 입력되도록 체킹하는 역할을 수행한다. 만약 별도의 텍스트 작성 없이 제출하려 한다면 '이 입력란을 작성하세요.'라는 안내 문구가 뜬다.
style="resize:none;"
<body>
<form action="" method="">
<textarea cols="30" rows="10" style="resize:none;" required></textarea>
</form>
</body>
- style 속성 중 리사이즈(resize) 관한 설정을 none으로 명시해 임의의 크기 조정이 불가하게 만들 수 있다: style="resize:none;"
- <textarea>는 <input> 태그의 type="text" 속성과 생김새는 비슷하지만, 여러 줄 작성이 가능하다는 특징이 있다.
'Frontend > HTML' 카테고리의 다른 글
| [HTML/수업 과제 practice] 폼 관련 태그 (0) | 2022.02.09 |
|---|---|
| [HTML/수업 과제 practice] 글자 목록 태그, 테이블 태그 (0) | 2022.02.09 |
| [HTML5] 하이퍼링크 태그 | a | href | target (0) | 2022.02.09 |
| [HTML5] 멀티미디어 태그 | img | audio | video (0) | 2022.02.09 |
| [HTML5] 영역 분할 태그 | div | span | iframe | 시맨틱 (0) | 2022.02.09 |
