본문 바로가기
클라이언트/HTML
HTML 태그 - <form>
Hana_h 2023. 4. 12. 23:35

- Form 태그는 설명이 길어서 글을 따로 뺐다.

// 폼, Form 
    - 입력 양식, 입력 컨트롤
    - 클라이언트(사용자)로부터 입력장치(키보드, 마우스 등)를 통해서 데이터를 입력받는 역할
    - 입력 데이터 > 서버로 전송 > 업무 활용 or DB 저장 등

    <form>
        - 모든 입력 컨트롤을 감싸는 컨테이너
        - 입력값을 서버로 전송하는 역할
        - 렌더링 결과 없음 > 눈에 보이지 않음

        - 속성
            ~ method: 데이터를 전송하는 방식
                1. get
                    - 전송되는 데이터를 URL에 붙여서 전송하는 방식
                    - 편법
                    - 전송되는 데이터가 주소창에 노출됨 > 보안 문제 有
                    - 노출되면 안 되는 데이터는 절대로 get 방식으로 전송하면 안 된다.
                    - URL(최대 256자, 65535byte) > 넘어가면 Overflow > 짤림 > 대량의 데이터 전송 불가
                    - 아주 짧은 데이터(식별자, 숫자 등)만 전송하는 용도

                2. post
                    - 전송되는 데이터를 패킷 안에 넣어서 전송하는 방식
                    - FM
                    - 데이터가 외부로 노출되지 않는다. > get방식에 비해 보안 괜찮..
                    - 전송 길이 무제한

            ~ action: 데이터를 수신하는 서버측 주소(URL)
                > 데이터를 수신할 능력이 있는 프로그램의 주소

<!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 method="get" action="ex19.jsp">
        <input type="text" name="data">
        <input type="submit" value="전송하기">
    </form> -->

    <form method="post" action="ex19.jsp">
        <input type="text" name="data" value="아무개" reaadonly>
        <input type="submit" value="전송하기">
    </form>

    <br>
    <hr>
    
    <h1>네이버 검색</h1>
    
    <form method="get" action="https://search.naver.com/search.naver">
        <input type="text" name="query">
        <input type="submit" value="검색하기">
    </form>

    <br>
    <hr>
    
    </form>
        
</body>
</html>

       <input>
            - 인라인 태그
            - 단독 태그

            - 속성

                ~ id: 식별자. CSS/JavaScript에서 사용
                ~ class: 식별자. CSS/JavaScript에서 사용
                ~ type: 입력 컨트롤의 종류
                ~ type="text": 단일 라인 텍스트 박스
                ~ name: 식별자
                ~ size: 길이(문자 개수)
                ~ maxlength: 최대 입력 길이(문자 개수)
                ~ accesskey: 바로가기(Alt+조합키)
                ~ autofocus: 자동 포커스 > 입력창을 클릭하지 않고 바로 입력 가능
                ~ autocomplete
                ~ value: 컨트롤의 입력값(현재 입력값)
                ~ placeholder: 입력창에 안내 문구를 넣을 수 있다.(입력하면 자동으로 지워짐!)
                ~ required: 값을 필수로 입력하도록 설정함.

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

        텍스트 박스(단일라인):
        <input type="text" name="txt1" id="txt1" class="txt1" size="20" maxlength="5"
                accesskey="s" autofocus autocomplete="off">

    <br>
    <hr>

    </form>
        
</body>
</html>

<!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>
    
    <!-- 
    
        HTML 4.01 + XHTML 1.0
        HTML5
    
    -->

    <h1>HTML5</h1>

    <form method="post" action="ex20.jsp">


        <input type="text" value="안뇽">


    </form>    

</body>
</html>

<!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>
    
    <!-- 
    
        HTML 4.01 + XHTML 1.0
        HTML5
    
    -->

    <h1>HTML5</h1>

    <form method="post" action="ex20.jsp">


        <input type="text" placeholder="아이디를 입력하세요." required> **필수입력


    </form>    

</body>
</html>

           
                ~ type="password": 암호 상자, Masked Text Box
                    - 모든 속성이 텍스트박스와 동일
                    - value 속성은 사용 금지!! > 항상 새로 입력받게 만든다.

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

    <!-- 암호 상자 -->

        텍스트박스(암호):
        <input type="password">


    <br>
    <hr>

                ~ type="checkbox": 논리값 입력
                ~ checked: 기본값을 체크한 상태로 함.
                ~ readonly: 읽기 전용(전원 ON) > 서버로 전송 가능
                ~ disabled: 비활성화(전원 OFF) > 서버로 전송 불가능
                ~ type="radio": 단일 선택 > 반드시 2개 이상 함께 사용

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

    <!-- 
        체크박스
     -->
     체크박스:
    <input type="checkbox" disabled> 
	<br>
    
    <input type="checkbox" id="cb1"> <label for="cb1">독서</label>
    <label><input type="checkbox"> 수영</label>
    <label><input type="checkbox" checked> 영화</label>

    <br>
    <hr>

    <!-- 
       라디오 버튼
     -->

    <input type="radio" name="rbGender"> 남자
    <input type="radio" name="rbGender"> 여자


    <br>
    <hr>

    </form>
        
</body>
</html>

                ~ type="file": 파일 업로드
                    - 첨부 파일
                    - Open Dialog Box를 호출하는 역할
                ~ type="hidden": 히든 태그
                    - 눈에 보이지 않는 태그(value 값도 숨김)
                    - 개발자용
                    - 사용자 모르게 서버로 데이터를 전송하는 역할(지저분하지 않게..)

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

        <!-- 
            파일 업로드
        -->

        파일 선택:
        <input type="file">

        <br>
        <hr>

        <!-- 
            히든태그
        -->

        히든 태그:
        <input type="hidden" name="id" value="hong">

        <br>
        <hr>


    </form>
        
</body>
</html>

                ~ type="submit": 입력값 제출(전송)
                ~ type="reset": 선택값 초기화 (요즘은 잘 안 씀.. > 그냥 새로고침 함)
                ~ type="button": 일반 버튼
                    - 기능을 자유롭게 정의할 수 있음.
                        ~~ onclik="alter('값')": 안내창 띄우기

<!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>
        <!-- 
            버튼
        -->

        전송버튼: <input type="submit" value="보내기">
        <br>
        취소버튼: <input type="reset" value="초기화">
        <br>
        일반버튼: <input type="button" value="일반 버튼"
                    onclick="alert('안녕하세요!!');">
        
        <br>

    </form>
        
</body>
</html>

                ~ type="email|url": "이메일 주소|url"의 간단한 유효성 검사를 해준다.
                ~ type="tel": 휴대폰으로 접속하면 숫자 키패드로 바로 입력할 수 있게 띄워준다.
                ~ type="number": 숫자 유효성 검사 + 입력하기 쉽게 해준다.
                    ~~ min: 최솟값
                    ~~ max: 최댓값
                    ~~ step: 증감치(사이값은 유효성 검사로 거름)
                ~ type="range": 숫자 근사치 입력
                    - <input type="range" onchange="document.getElementById('txt2').value = this.value;" min="50" max="500" step="50"> <input type="txt" id="txt2" size = 10>  :  값을 알 수 있다.
                ~ type="color":
                    - <input type="color" onchange="document.getElementById('txt3').value = this.value;">
                        <input type="text" id="txt3" size="10">  : 색상값을 알 수 있다.                
                ~ type="date|month|week|time|datetime-local" : 시간 관련 입력
                ~ list <datalist>
                     - <option>에 value 속성 필요
                     - 셀렉트 박스처럼 선택지를 생성할 수 있다.

<!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>
    
    <!-- 
    
        HTML 4.01 + XHTML 1.0
        HTML5
    
    -->

    <h1>HTML5</h1>

    <form method="post" action="ex20.jsp">

        <input type="submit" value="보내기">
        <hr>

        이메일: <input type="email"> 

        <br>
        <hr>

        URL: <input type="url">

        <br>0.
        <hr>

        전화: <input type="tel">

        <br>
        <hr>

        숫자: <input type="number">

        <br>
        <hr>

        나이: <input type="number" min="0" max="100" step="10">

        <br>
        <hr>

        범위(숫자입력): <input type="range" onchange="document.getElementById('txt2').value = this.value; c" min="50" max="500" step="50">
        <input type="txt" id="txt2" size = 10>

        <br>
        <hr>

        색상: <input type="color" onchange="document.getElementById('txt3').value = this.value; document.body.bgColor = this.value;">
        <input type="text" id="txt3" size="10">

        <br>
        <hr>

        날짜시간:
        <input type="date">
        <hr>
        <input type="month">
        <hr>
        <input type="week">
        <hr>
        <input type="time">
        <hr>
        <input type="datetime-local">


        <br>
        <hr>

        데이터 리스트:
        <input type="text" list="list1">

        <datalist id="list1">
            <option value="홍길동"></option>
            <option value="이순신"></option>
            <option value="아무개"></option>
        </datalist>

    </form>    

</body>
</html>

        <textarea>
            - 다중라인 입력
            - 쌍태그
            - 대부분의 속성은 텍스트 박스와 동일
            - value 속성이 없다.
            - textarea내의 영역 > 일반 문서 영역(X), 컨트롤 영역(O) > 편집기의 공백이 그대로 적용된다.

            - 속성
                ~ cols: 행 글자 수
                ~ rows: 열 수

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

    <!-- 다중 라인 입력 상자 -->

        텍스트박스(다중라인):
        <textarea cols="50" rows="5">
        </textarea>


    <br>
    <hr>


    </form>
        
</body>
</html>

        <select>
            - 셀렉트 박스, 콤보(Combo) 박스, 드랍 다운 리스트(DropDownList)
        
            - 속성
                ~ size: 한번에 표시할 수 있는 옵션의 수
                ~ multiple: 다중 선택 가능

            <optgroup>
                - 셀렉트 박스의 카테고리를 나누어 준다.

                - 속성
                    ~ label: 카테고리 이름을 지정한다.

<!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>
        
    <!-- 
        셀렉트 박스
     -->

     셀렉트 박스:
     <select>
         <option>강아지</option>
         <option>고양이</option>
         <option>병아리</option>
     </select>

     셀렉트 박스:
     <select size="5">
         <option>강아지</option>
         <option>고양이</option>
         <option>병아리</option>
     </select>

     셀렉트 박스:
     <select size="5" multiple>
         <option>강아지</option>
         <option>고양이</option>
         <option>병아리</option>
     </select>

     <br>
     <br>


    </form>
        
</body>
</html>

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

     셀렉트 박스:
     <select>
         <option disabled>▣▣▣ 자바 ▣▣▣</option>
         <option>클래스</option>
         <option>메서드</option>
         <option>배열</option>

         <option disabled> ▣▣▣ 오라클 ▣▣▣</option>
         <option>테이블</option>
         <option>프로시저</option>
         <option>조인</option>
         <option>서브쿼리</option>
         
         <option disabled>▣▣▣ HTML ▣▣▣</option>
         <option>head태그</option>
         <option>body태그</option>
     </select>

     셀렉트 박스:
     <select>

         <optgroup label="자바"> 
             <option>클래스</option>
             <option>메서드</option>
             <option>배열</option>
         </optgroup>

         <optgroup label="오라클">
             <option>테이블</option>
             <option>프로시저</option>
             <option>조인</option>
             <option>서브쿼리</option>
         </optgroup>
         
         <optgroup label="HTML">
             <option>head태그</option>
             <option>body태그</option>
         </optgroup>
     </select>

     <br>
     <hr>

    </form>
        
</body>
</html>

        <button>
            - 속성
                ~type="submit"
                ~type="reset"
                ~type="button"

        ※ <input>의 button vs <button>
            - <input>의 button: 또다른 태그를 넣을 수 없다.
            - <button>: 또다른 태그를 넣을 수 있다.


        <datalist>
            - <option>에 value 속성 필요
            - 셀렉트 박스처럼 선택지를 생성할 수 있다.

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

        전송버튼: <button type="submit">보내기</button>
        <br>
        취소버튼: <button type="reset">보내기</button>
        <br>
        일반버튼: <button type="button">보내기</button>

        <br>
        <hr>

        <!-- 속성값 > CDATA -->
        <button type="button">
            <img src="images/bullet01.png">
            보내기
        </button>

    </form>
        
</body>
</html>

- 이것저것 총

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>form</title>
    </head>
    <body>
        <form action="/text.html" method="post">
            <h1>Form 관련 요소</h1>
            <fieldset>
                <legend><i>필수 정보</i></legend>
                <label for="id"><b>아이디:</b></label>
                <input type="text" id="id" placeholder="영문+숫자만 가능합니다. " ><br><br>            
                <label for="password"><b>비밀번호:</b></label>
                <input type="password" id="password" placeholder="영어+숫자+특수문자"><br><br>
                <b>성별:</b>
                <label for="male">남자</label><input type="radio" id="male" name="gender"> 
                <label for="female">여자</label><input type="radio" id="female" name="gender"><br><br>
                <label for="profileImage"><b>프로필 사진: </b></label><input type="file" id="profileImage"><br>
            </fieldset>
            <br>
            <fieldset> 
                <legend><i>부가 정보</i></legend>
                <b>취미:</b>
                <label for="movie">영화 감상</label><input type="checkbox" id="movie" name="hobby"> 
                <label for="book">독서</label><input type="checkbox" id="book" name="hobby"> 
                <label for="music">음악 감상</label><input type="checkbox" id="music" name="hobby"> 
                <label for="walk">산책</label><input type="checkbox" id="walk" name="hobby"> <br><br>
                
                <label for="location"><b>지역: </b></label>            
                <select id="location">
                    <option selected>서울특별시</option>
                    <option>경기도</option>
                    <option>전라북도</option>
                    <option>전라남도</option>
                </select><br><br>
                <label for="introduce"><b>자기소개: </b></label>
                <textarea cols="30" rows="5" id="introduce" placeholder="간단하게 자신을 소개해 주세요."></textarea><br>
            </fieldset>
            <br>
            <input type="submit"><br><br>
            <input type="reset"><br>
            <input type="image" src="https://as2.ftcdn.net/v2/jpg/02/19/64/29/1000_F_219642909_uGLJ1y0KV1XQLaGnNT0a6lMRLsDddc0O.jpg" alt="로그인" width="70" height="50"><br><br>        
        </form>
    </body>

'클라이언트 > HTML' 카테고리의 다른 글

HTML 블록, 인라인  (0) 2023.03.02
HTML 시멘틱 마크업  (0) 2023.03.01
HTML 콘텐츠 모델  (0) 2023.03.01
HTML 태그의 종류  (0) 2023.02.28
HTML 문법  (0) 2023.02.26

'클라이언트/HTML' Related Articles

티스토리툴바