폼 관련 태그들

HTML

폼 관련 태그들

alarim 2023. 6. 22. 13:55

폼 만들기

폼의 정의

사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼 (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>

여러 데이터 나열해 보여주기

<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>