-
폼 만들기
- 폼의 정의
사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼 (form)
- 폼의 기본 태그들
<form> - 폼을 만드는 기본 태그
<label> - 폼 요소에 레이블(텍스트)을 붙이는 태그
<fieldset> - 폼 요소를 그룹으로 묶는 태그
<legend> - 그룹으로 묶는 구역에 제목을 붙이는 태그
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <!-- fieldset는 테두리 박스 --> <fieldset> <!-- legend 는 테두리에 제목 --> <legend>개인 정보</legend> <ul> <li> <!-- for="name" name 과 id="name" name을 맞추어야 label 작동 --> <label for="name">이름</label> <input type="text" id="name"> </li> <li> <label for="mail">메일주소</label> <input type="text" id="mail"> </li> </ul> </fieldset> <fieldset> <!-- legend 는 테두리에 제목 --> <legend>로그인 정보</legend> <ul> <li> <!-- for="name" name 과 id="name" name을 맞추어야 label 작동 --> <label for="ID">아이디</label> <input type="text" id="ID"> </li> <li> <label for="password">비밀번호</label> <input type="text" id="password"> </li> </ul> </fieldset> </form> </body> </html><input> - 사용자가 입력하는 부분은 거의 <input> 태그를 이용해 처리 type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다.
input type
type = “hidden” - 화면상의 폼에는 보이지 않는다.
type = “text” - 주로 아이디나 이름, 주소 등 텍스트 입력
type = “password” - 비밀번호 입력란
type = “search” - 검색 필드
type = “url” - 웹 주소 필드
type = “email” - 메일주소 입력 필드
type = “tel” - 전화번호 입력 필드
type = “number” - 스핀 박스로 숫자 입력하는 필드
type = “range” - 슬라이드 막대를 이용해 숫자 입력하는 필드
range number color (각자 쓰는 방법)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <fieldset> <legend>등록 정보</legend> 참여인원 <small>(최대10명)</small> <input type="number" min="0" max="10"><br> 지원물품 <small>(1인당 5개)</small> <!-- step="5" -> 배수 형태로 움직임 --> <input type="number" value="3" min="0" max="50" step="5"><br> 희망단계 <small>(하,중,상)</small> <input type="range" value="2" min="1" max="3"><br> <!-- R:red,G:green B:blue -> 3원색을 가지고 색상 조합 --> <!-- #에 숫자 2개씩 쌍으로 6개 : 16진수를 2개씩 RGB 형태의 색상 숫자로 표시(최대:ff)--> <input type="color" value="#00ff00"><br> </fieldset> </form> </body> </html>type = “radio” - 여러 항목중 하나만 선택할 때
type = “checkbox” - 여러 항목 중 둘 이상을 선택할 때
예제) radio, checkbox (하나, 둘이상 선택)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <h3>수강 분야(다수선택가능)</h3> <ul> <!-- name="grm" ->grm을 가지고 서버로 이동 --> <!-- 문법을 클릭해도 체크가 되지 않음 --> <input type="checkbox" name="grm">문법<br> <input type="checkbox" name="wr">작문<br> <!-- label -> 독해를 클릭하면 체크가 됨 --> <label><input type="checkbox" name="rd">독해<br></label> </ul> <h3>수강 과목(1과목만 선택 가능)</h3> <!-- name="subject"->subject 을 똑같이 맞추어야 한마만 선택 가능 --> <!-- 서버로 갈때는 subject에 eng나 ch를 들고 간다 --> <!-- label 추가해서 글자를 클릭하면 선택됨 --> <ul> <label><input type="radio" name="subject" value="eng">영어회화<br></label> <label><input type="radio" name="subject" value="ch">중국어회화<br></label> <label><input type="radio" name="subject" value="jp">일어<br></label> </ul> </form> </body> </html>type = “color” - 색상 표에서 색상 선택
type =”date”,type=”month”,type=”week”
date : 날짜를 선택합니다.
month : 월과 연도를 선택합니다.
week : 주와 연도를 선택합니다.
type = ”time”,type=”datetime-local” : 처음 나타나는 시간 입력
예제) time,datetime-local
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>검사시간을 선택하세요(오늘)</h3> 시작 시간<input type="time" value="09:00"> 종료 시간<input type="time" value="18:00"> <h3>검사시간을 선택하세요(오늘)</h3> 시작시간<input type="datetime-local" value="2016-03-02T09:00"> 종료시간<input type="datetime-local" value="2016-03-02T09:00"> </body> </html>type = “submit”,type=”reset” : 폼 전송/리셋 버튼
type = “image” submit 버튼 대신 이미지 삽입
input (이미지 삽입)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <table> <tr> <td>아이디<input type="text" size="15"></td> <td>비밀번호<input type="password" size="15"></td> <td><input type="image" src="images/login.jpg"></td> </tr> </table> </form> </body> </html>input 속성
autofocus - 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
placeholder - 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
redonly - 내용을 보기만 하고 입력하지 못하게 함
required - 필수 필드 체크
min, max, step - 해당필드의 최솟값,최댓값 (step은 숫자간격)
size : 텍스트 크기
maxlength : 입력 가능한 최대 글자
minlegth : 입력 해야할 최소 글자
예제 ) placeholder
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>프런트엔드 개발자 지원서</h1> <p> HTML,CSS,Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다. </p> <hr> <h4>개인정보</h4> <ul> <li>이름 <input type="text" autofocus placeholder="공백없이 입력하세요"></li> <li>연락처 <input type="tel" ></li> </ul> <h4>지원 분야</h4> <ul > <li><label><input type="radio" name="1" value="pub"> 웹 퍼블리싱 </li></label> <li><label><input type="radio"name="1" value="ap"> 웹 애플리케이션 개발 </li></label> <li><label><input type="radio"name="1" value="we"> 개발 환경 개선 </li></label> </ul> <h3>지원동기</h3> <textarea cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요."> </textarea> <div><input type="submit" value="접수하기"> <input type="reset" value="다시 쓰기"></div> </body> </html>여러 데이터 나열해 보여주기
<select>,<optgroup>,<option>
<optgroup> - 여러 항목을 그룹을 묶을 때 사용 (label 속성을 사용해서 그룹제목)
<datalist>,<option> - 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨
예제) datelist (목록중 선택)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>여름방학 특강 신청</h1> <form> <fieldset> <legend>수강 신청인</legend> <ul> <li> 학번 <input type="text"autofocus> </li> <li> 이름 <input type="text" > </li> <li> 학과 <!-- multiple 속성은 모양이 늘어나면서 ctrl키를 이용해서 여러개 선택 가능 --> <!-- size 속성은 콤보 갯수를 설정 --> <select> <!-- optgroup 태그는 콤보리스트를 그룹으로 묶음 --> <!-- label 속성은 그룹 이름 설정 --> <optgroup label="공과대학"> <!-- value 속성은 서버로 들고 간다 --> <option value="archi">건축공학과</option> <option value="mechanic">기계공학과</option> <option value="archi">산업공학과</option> <option value="archi">전기공학과</option> <!-- selected 속성은 초기값 설정 --> <option value="computer" selected>컴퓨터공학과</option> <option value="archi">화학공학과</option> </optgroup> <optgroup label="인문대학"> <option value="history">사학과</option> <option value="lang">어문학부</option> <option value="philo">철학</option> </optgroup> </select> </li> </ul> </fieldset> <fieldset> <legend>수강 과목을 선택하세요</legend> <ul> <li> 관심분야 <!-- list랑 id 속성값(이름) 맞췄는지 확인 --> <!-- 선택하면 value값이 기본값으로 표시 --> <input type="text" list="choices"> <datalist id="choices"> <option value="grammar" label="문법"></option> <option value="voca" label="어휘"></option> <option value="speaking" label="회화"></option> <option value="listening" label="리스닝"></option> <option value="news" label="뉴스청취"></option> </datalist> </li> </ul> </fieldset> </form> </body> </html>- <option> 태그의 속성
value - 서버로 넘겨질 값을 지정
label - 사용자를위해 브라우저에 표시할 레이블 따로 지정안할때 value값을 레이블로 사용
기타 다양한 폼 요소들
<button> - 다양한 형태의 버튼 삽입
<output> - 계산 결과를 브라우저에 표시
<progress> - 작업 진행 상태를 브라우저에 표시
예제) progress (바에서 어디까지 진행)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li> 10초 남음 <!-- 60초 중 50초 진행 --> <progress value="50" max="60"></progress> </li> <li> 진행률 30% <!-- 전체 100% 중 30% 진행 --> <progress value="30" max="100"></progress> </li> </ul> </body> </html><meter> - 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용
예제) meter (전체에서 어디까지 진행 progress랑 비슷함)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li> 점유율 0.8 <!-- 전체 기준 1로 0.8만큼 차지 --> <meter value="0.8"></meter> </li> <li> 사용량 64% <!-- 전체 기준 100으로 64만큼 차지 --> <meter min="0" max="100" value="64"></meter> </li> <li> 트래픽 초과 <!-- high 속성값보다 크면 노란색으로 표시 --> <!-- low 속성값보다 작으면 노란색으로 표시 --> <meter min="1024" max="10240" low="2048" high="8192" value="2000"></meter> </li> </ul> </body> </html>'HTML' 카테고리의 다른 글
이미지와 하이퍼링크 (0) 2023.06.22 텍스트 관련 태그들 (0) 2023.06.22 HTML 기본기 다지기 (0) 2023.06.22