[HTML] 6. 폼 관련 태그

2024년 04월 22일

Song hyun
작성자
2024.04.22.:57

728x90

[HTML] 6. 폼 관련 태그

오늘 배운 것

오늘은 <form>, <input> 태그 및 관련 속성들에 대해 배웠다.
위 태그, 속성들을 응용한 간단한 폼, 로그인 화면들을 제작했다.

(1) <form>&<input> 태그

<form>: 폼을 만들어주는 태그.

<form method>: 통신 방식으로 post하는 태그이다.

action 속성: 해당 문서로 이동하기

UI=User Interface

<input type=”text”>:

<input type=”submit”>: 제출 버튼을 생성한다. 서버로 전송할 때 사용된다. 기본값으로 “제출”이 출력된다.

(type=”submit”의 기본값이 “출력”이기 때문에, <input> 태그에 value=”제출”을 추가해도 출력 텍스트가 변하지 않는다!)

<input type=”button”>: 버튼을 출력한다. 다만 type=”submit”과는 다르게, 클릭은 가능하나 기본 이동은 되지 않는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--<form method>: 통신방식으로 post-->
    <!--action 속성: 해당 문서로 이동-->
    <form method="post" action="search.jsp">
        <!--<input>:특정 UI 항목을 만들 때 사용-->
        <!--UI: User Interface(디자인)-->
        <!--<input type="text">: 텍스트 박스-->
        <!--type=submit: 제출 버튼 생성. 서버로 전송될 때 사용-->
        <!--기본값이 '제출'-->
        <input type="text">
        <!--<input type="submit">-->
        <!--submit 의 기본값이 제출이기에, value=제출이라고 입력해도 같은 결과가 나온다.-->
        <!--파일에 액세스 할 수 없음.->search.jsp파일이 없기 때문.-->
        <input type="submit" value="제출">
        <!--type="button"은 클릭은 되지만, 기본 이동은 되지 않는다.-->
        <input type="button" value="검색">
    </form>
</body>
</html>

(2) <form>&<input> 관련 속성 및 응용

type=”checkbox”: 다중 선택이 가능한 체크박스(네모칸)을 출력한다.

type=”radio”: 단일 선택이 가능한 라디오 버튼(동그라미 칸)을 출력한다.

*<input type=”radio”>의 경우, name 속성에서 이름을 통일해야 한다.

(ex:

<input type=”radio” name=”a”> (o)

<input type=”radio” name=”b”>(x))

<label>: 체크박스, 라디오 버튼 출력 태그를 <label> 태그로 감싸면, 옆의 텍스트만 클릭해도 자동으로 선택된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <h2>수강분야(다수 선택 가능)</h2>
        <ul>
            <!--<input tyep="checkbox">: 다중 선택-->
            <!--name="grammer": 서버로 전송되는 값(화면 표시x)-->
            <input type="checkbox" name="grammer">문법<br>
            <input type="checkbox" name="writting">작문<br>
            <!--<label> 태그로 체크박스, 라디오 버튼을 감싸면, 텍스트만 클릭해도 선택이 된다.-->
            <label>
                <input type="checkbox" name="reading">독해<br>
            </label>
        </ul>
        <h2>수강분야(한 과목만 선택 가능)</h2>
        <ul>
            <!--<input type="radio">: 라디오 버튼을 만들 때, name 속성을 하나로 일치시켜야 한다.-->
            <!--name 속성이 일치하지 않을 때, 복수 선택이 가능해진다.-->
            <label><input type="radio" name="gr">문법</label><br>
            <label><input type="radio" name="gr">작문<br></label>
            <input type="radio" name="gr">독해<br>
        </ul>
    </form>
</body>
</html>

<fieldset>: 영역을 묶어주는 태그.

<legend>: <fieldset> 태그로 묶인 영역에 제목을 달아주는 태그이다.

*<label for name””>-<input id=name””>

*위의 name을 통일시켜야, <label>태그가 <input>태그에 잘 적용될 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <!--<fieldset> 태그는 영역을 묶어준다.-->
        <!--<legend> 태그는 <fieldset> 태그에 제목을 달아준다.-->
        <fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li>
                    <!--<label for name>-<input id=name>-->
                    <!--for="name"과 id="name"을 맞추어야 커서가 위치된다.-->
                    <label for="name">이름</label>
                    <!--텍스트 박스-->
                    <input type="text" id="name">
                </li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

-min 속성: 입력받을 수치의 최솟값을 설정한다.

-max 속성: 입력받을 수치의 최댓값을 설정한다.

-value 속성: 초기값을 설정한다. 이때 value 로 설정된 값은 기본값이 된다.

<input type=”color”>: 색상을 입력받는다.

-이 때, value 값과 색상코드를 사용하여 기본값(색상)을 지정할 수 있다. (16진수/00~ff)

(ex:<input type=”color” value=”#00ff00”>)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 속성은 최소, max 속성은 최대치를 설정한다.-->
            <!--아래 태그에서는 min="0",max="10"이니 0부터 10까지의 수가 선택 가능하다.-->
            <input type="number" min="0" max="10"><br>
            지원물품<small>(1인당 5개)</small>
            <!--value="5": 초기값을 5로 설정-->
            <!--step="5":숫자 5 단위로 선택 가능-->
            <input type="number" value="5" step="5" min="0" max="50"><br>
            <!--<input type="range">: 슬라이드 바를 생성한다.-->
            희망단계<small>(하,중,상)</small>
            <input type="range" value="2" min="1" max="3"><br>
            <!--<input type="color">: 색상을 선택할 수 있다.-->
            <!--value 속성과 색상코드를 이용해 기본 색상을 설정할 수 있다.-->
            <!--16진수가 2개씩 쌍으로 6개(RGB)00~ff-->
            <!--10진수 0-9, 16진수 A(10)-F(15)-->
            <input type="color" value="#00ff00">
        </fieldset>
    </form>
</body>
</html>

-date/week/month: 차례대로 연월일, 주, 연월을 선택하는 창을 출력하는 속성이다. (<input type=date/week/month>)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <h2>날짜 입력</h2>
        <!--<input type="date">는 연, 월, 일-->
        <!--<input type="month">는 연, 월-->
        <!--<input type="week">는 주를 선택하는 창을 출력한다.-->
        <input type="date"><br>
        <input type="month"><br>
        <input type="week"><br>
    </form>
</body>
</html>

<input type=”password”>: 입력한 텍스트가 검은 불릿(동그라미)으로 출력된다.

<input type=”submit”>: 제출 버튼을 생성한다. value 속성을 이용해 버튼에 텍스트를 출력할 수도 있다. submit으로 제출된 값은 <form>태그의 action값을 찾아간다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            아이디 <input type="text"><br>
            <!--<input type="password">: 입력한 텍스트가 불릿(검은 점)으로 가림처리 되어 출력된다.-->
            비밀번호 <input type="password">
            <!--<input type="submit": form 태그에 action값을 찾아감-->
            <!--action 값이 없어서 초기화-->
            <input type="submit" value="로그인">
        </fieldset>
    </form>
</body>
</html>

<input type=”datetime-local”>:연도,월,일,시간을 선택하는 창을 출력한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <h2>검사 시간을 선택하세요(오늘)</h2>
        시작 시간 <input type="time" value="00:00"><br>
        종료 시간 <input type="time" value="00:00"><br>
        <!--<input type="datetime-local": 연도, 월, 일, 시간을 선택한다.-->
        <h2>검사 시간을 선택하세요(다른 날짜)</h2>
        시작 시간 <input type="datetime-local" value="2016-03-15 01:00"><br>
        종료 시간 <input type="datetime-local" value="2016-03-15 18:00">
    </form>
</body>
</html>

<form method=”post”>: post 방식으로 action에 적힌 파일을 호출하는 태그이다.

이 때, 지정된 파일이 존재하지 않거나 이동하지 못하는 상황이라면 오류가 발생한다. (ERR_FILE_NOT_FOUND)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>메일링 리스트 등록</h3>
    <!--post 방식으로 register.jsp를 호출한다.-->
    <!--ERR_FILE_NOT_FOUND: register.jsp로 이동하지 못해 오류 발생-->
    <form method="post" action="regiset.jsp">
        메일 주소1<input type="text"><br>
        메일 주소2<input type="text"><br>
        <!--<input type="submit": 기본값이 제출-->
        <input type="submit" value="제출">     
        <!--<input type="reset": 기본값이 초기화-->
        <!--type="reset": form 태그 안에 있는 값을 초기화-->
        <!--<input type="reset">-->
        <input type="reset" value="다시 입력">
    </form>
</body>
</html>

size 속성: <input> 태그와 함께 사용하면 검색창의 크기를 조절할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <!--size 속성으로 검색창의 크기를 설정할 수 있다.-->
                <td>아이디<input type="text" size="15"></td>
                <td>비밀번호<input type="password" size="15"></td>
                <td><input type="image" src="images/login.jpg"></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </form>
</body>
</html>

<select>:드랍다운리스트-콤보박스를 생성하는 태그이다. 실무에서 많이 사용된다.

<option>: <select>로 만들어진 콤보박스 내에서 선택지를 만드는 태그이다.

readonly 속성: 설정된 value 값을 고정시킨다. 주로 id에 많이 쓰인다.

autofocus: 마우스 커서가 깜빡거리는 속성이다.

required: 필수 요소로 지정하는 속성이다. 해당 속성으로 지정된 태그는 반드시 입력을 받아야 제출 할 수 있다.

placeholder: 힌트를 작성하는 속성이다. 전화번호, 주소 등에 많이 쓰인다.

maxlength: 입력받을 글자의 최대 글자수를 설정하는 속성이다. 주민번호, 전화번호 등에 쓰인다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>여름방학 특강 신청</h1>
    <form>
        <fieldset>
            <legend>수강 과목</legend>
            <ul>
                <li>
                     영어회화(초급)
                     <!--readonly 속성은 설정된 value 값을 고정시킨다.-->
                     <!--readonly는 주로 id에 많이 사용한다.-->
                     <input type="text" value="오전 9:00~11:00" readonly>
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>신청자</legend>
            <ul>
                <li>
                     이름
                     <!--autofocus 속성을 추가하면 마우스 커서가 깜빡거린다.-->
                     <!--required 속성을 추가하면 해당 <input>이 필수값이 된다.-->
                     <input type="text" autofocus required>
                </li>
                <li>
                    학번
                    <!--placeholder 속성은 힌트를 삽입한다.->전화번호에서 자주 사용-->
                    <!--maxlength 속성은 글자 수를 제한한다.-->
                    <input type="text" placeholder="하이픈 없이 입력" maxlength="8">
               </li>
               <li>
                학과
                <!--<select>:드랍다운리스트-콤보박스를 생성하는 태그. 실무에서 많이 사용0-->
                <!--<option>: 선택지를 생성하는 태그-->
                <select>
                    <!--첫번째 <option> 값이 기본 선택된다.-->
                    <!--value 속성의 값은 서버로 들고 간다.-->
                    <!--<option>에 selected 속성을 추가하면 기본값으로 설정된다.-->
                    <option value="arch">건축공학과</option>
                    <option value="mach" selected>기계공학과</option>
                    <option value="indu">산업공학과</option>
                    <option value="elec">전기전자공학과</option>
                    <option value="comp">컴퓨터공학과</option>
                    <option value="chem">화학공학과</option>
                </select>
               </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>교재 주문</legend>
            <ul>
                <li>
                    교재
                    <input type="number" value="1" min="1" max="3">
                </li>
                <li>
                    단체주문
                    <input type="number" value="10" min="10" step="10" max="100">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <button type="submit">신청하기</button>
            <button type="reset">다시쓰기</button>
        </fieldset>
    </form>
</body>
</html>

<select>+multiple 속성: 다중 선택이 가능한 콤보박스를 생성한다.

size 속성: 콤보박스의 크기를 조절한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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" autofocus></li>
                <!--<select>+multiple: 다중 선택이 가능한 콤보박스-->
                <!--size 속성: 콤보박스 크기 조절-->
                <li>학과 <select size="3" multiple>
                    <option value="arch">건축공학과</option>
                    <option value="comp">컴퓨터공학과</option>
                    <option value="wood">토목공학과</option>
                    <option value="chem">화학공학과</option>
                </select>
            </ul>
        </fieldset>
    </form>
</body>
</html>

<optgroup>: <option> 태그들을 하나의 그룹으로 묶는다.

<optgroup>+label 속성: 분류된 옵션 태그의 그룹에 이름을 붙인다. (ex: 과일-오렌지, 사과, 딸기…)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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" autofocus></li>
                <li>학과 
                <select>
                    <!--<optgroup>: <option> 태그들을 그룹으로 묶는다.-->
                    <!--<optgroup>+label: 분류된 옵션 태그들에 이름을 붙인다.-->
                    <optgroup label="공과대학">
                        <option value="arch">건축공학과</option>
                        <option value="comp">컴퓨터공학과</option>
                        <option value="wood">토목공학과</option>
                        <option value="chem">화학공학과</option>
                    </optgroup>
                    <optgroup label="인문대학">
                        <option value="kor">국문학과</option>
                        <option value="eng">영문학과</option>
                        <option value="the">철학과</option>
                    </optgroup>
                </select>
            </ul>
        </fieldset>
    </form>
</body>
</html>

<textarea>: 텍스트창을 생성한다.

<textarea>+cols/rows 속성: 텍스트 창의 크기를 조절한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>로그인</legend>
            아이디<input type="text" size="10" autofocus>
            비밀번호<input type="password" size="10" autofocus>
            <input type="submit" value="로그인">
        </fieldset>
        <fieldset>
            <legend>가입하기</legend>
            <ul>
                <li>아이디<em>*</em>
                <input type="text" required></li>
                <li>비밀번호<em>*</em>
                <input type="password" required></li>
                <li>비밀번호 확인<em>*</em>
                <input type="password" required></li>
                <li>이름<em>*</em>
                <input type="text" required></li>
                <li>메일 주소<em>*</em>
                <input type="text" required></li>
                <li>전화번호
                <input type="text"></li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>이지스퍼블리싱</legend>
            <!--<textarea>+cols/rows 속성: 텍스트창 크기 조절 -->
            <textarea name="Intro" cols="60" rows="5">
                열심히 사는 사람들의 손을 잡아주는 곳~ 이지스 퍼블리싱

                우리는 책을 내기 전에 다시 한 번 물어봅니다
                우리는 책을 내기 전에 다시 한 번 물어봅니다
                우리는 책을 내기 전에 다시 한 번 물어봅니다
                우리는 책을 내기 전에 다시 한 번 물어봅니다
                우리는 책을 내기 전에 다시 한 번 물어봅니다
                우리는 책을 내기 전에 다시 한 번 물어봅니다
            </textarea>
        </fieldset>
        <fieldset>
            <input type="submit" value="가입하기">
            <input type="reset" value="다시쓰기">
        </fieldset>
    </form>
</body>
</html>

parseInt 속성: 입력받은 값을 정수로 변환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--parseint 속성: 정수로 변환-->
    <!--=<input name="result">-->
    <form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
        <input type="number" name="num1" value="0">
        +<input type="number" name="num2" value="0">
        <!----<input name="result">-->
        =<output name="result">
    </form>
</body>
</html>

<progress>: 진행 상태를 브라우저에 표시한다. 최솟값은 min, 최댓값은 max 속성을 이용한다. 현재 값은 value를 통해 지정할 수 있다.

high/low: 현재 value값에 따라 progress 창의 색을 변화시킨다. high를 초과하거나, low보다 밑도는 수치가 입력되면 progress 창의 색이 노란 색으로 변한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <!--<progress>:진행 상태를 브라우저에 표기-->
            <!--60초 중 50초 진행-->
            10초 남음 <progress max="60" value="50"></progress>
        </li>
        <li>
            <!--100 중 30 진행-->
            진행률 30% <progress max="100" value="30"></progress>
        </li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
            트래픽 초과
            <!--전체 100 중 64를 차지합니다.-->
            <!--high, low 속성: 설정한 값을 초과하거나 더 낮은 값이 입력되면, 색이 변한다.-->
            <meter min="100" max="10000" low="3000" high="8192" value="2000"></meter>
        </li>
    </ul>
</body>
</html>

728x90

'HTML,CSS, JS > HTML' 카테고리의 다른 글

[HTML&CSS 스터디] 12. 표 만들기 <table>,<tr>, <th>, <td> (0)	2024.07.07
[HTML] 7. HTML 파일명 작성 규칙 (0)	2024.07.01
[HTML] 5. 표(테이블) 만들기 (0)	2024.04.15
[HTML] 4. 링크 삽입하기 (0)	2024.04.15
[HTML] 3. 이미지 출력하기 (0)	2024.04.14

다음 글이 없습니다.

이전 글이 없습니다.

[HTML] 6. 폼 관련 태그

오늘 배운 것

(1) <form>&<input> 태그

(2) <form>&<input> 관련 속성 및 응용

'HTML,CSS, JS > HTML' 카테고리의 다른 글

티스토리툴바