자바 프로그래밍_Day_48_폼 관련 태그

 

 

2021. 10. 26

 

 

     > <fieldset></fieldset>, <legend></legend>

       -> 폼 요소를 그룹으로 묶고, 묶은 폼 요소에 명칭을 붙이는 태그

       -> 속성

          -> name : fieldset의 이름 지정

          -> form : fieldset이 속한 form의 이름 지정

 

     > <input>

       -> 사용자로부터 data를 입력 받기 위한 태그

       -> 속성

          -> type : 입력 창의 타입을 결정하는 속성(text, checkbox, radio 등)

          -> value : input요소의 기본 값 표시

          -> name : input을 구별할 수 있는 명칭

          -> min / max / step : 허용하는 범위 최소값 / 최대값 / 값의 증감값

          -> autocomplete : 자동 완성 기능

          -> height / width : 입력 창의 높이와 너비

          -> readonly : 읽기 전용 필드

          -> accept : 파일 타입에 대해 사용자에게 알려주는 기능

          -> multiple : 여러 개의 값 입력 가능

          -> placeholder : 사용자 입력 전 입력 창 표시 글

          -> autofocus : 입력 창 커서 표시

          -> required : 필수 입력 필드 지정

          -> list : <datalist>의 옵션 값을 <input> 안에 나열

          -> maxlength : 사용자가 입력할 수 있는 글자 수 제한

          -> size : 화면에서 표시하는 글자 수

          -> minlength : 최소 입력 글자(최신 크롬, 안드로이드만 지원)

          -> formaction : 실행할 프로그램 연결, submit / image일 때 사용

          -> formenctype : 전송 시 어떤 방식으로 해석할 지 지정, submit / image일 때 사용

          -> formnovalidate : 전송 시 데이터가 유효한지 여부 표시

          -> formtarget : 서버의 응답을 어디에 표시할 것인지 지정

 

       -> type 기본 속성

          -> text : 한 줄 짜리 텍스트 입력 창이 생김

          -> password : 비밀번호 입력 창, 입력 시 ∙∙∙으로 표시

          -> hidden : 사용자에게 보이지는 않지만 값을 넣을 수 있는 창, 관리자에게 필요한 값을 넣을 때 사용

          -> button : 버튼 생성, 자체 별도 기능은 없고, 스크립트에서 함수를 연결하여 활용한다.

          -> checkbox : 체크박스 생성

          -> file : 파일 입력 양식 출력

          -> image : 이미지 형태 생성

          -> radio : 라디오 버튼 생성

          -> submit : 입력한 데이터를 다른 페이지로 넘기는 기능

          -> reset : 입력한 내용을 지우는 기능

 

 

     > <input>

 

     > hidden

       -> <input type=hidden name="명칭" value="값">

       -> 속성

          -> name : hidden type 구분자, 명칭

          -> value : hidden에 들어갈 값 설정

 

 

     > text

       -> <input type=text name="명칭" value="값" size="숫자" maxlength="숫자">

       -> 속성

          -> name : text type 구분자, 명칭

          -> value : text에 들어갈 값 설정, 설정하지 않으면 빈 값

          -> size : 사용자 화면에 보여줄 문자 개수

          -> maxlength : 총 입력받은 개수

 

 

     > password

       -> <input type=password name="명칭" minlength="숫자" maxlength="숫자">

       -> 속성

          -> name : password type 구분자, 명칭

 

          -> minlength : password에 들어갈 최소 문자 수

          -> maxlength : password에 들어갈 최대 문자 수

 

 

     > button

       -> <input type=button id="명칭" value="값" onclick="스크립트함수">

       -> 속성

          -> id : id type 구분자, name은 중복 가능, id는 중복 불가

          -> value : button에 표시될 값 설정

          -> event : 자바스크립트 불러올 행동(예 : onclick)

 

 

     > checkbox / radio

       -> <input type=checkbox / radio id="명칭" value="값" [checked]>

       -> 속성

          -> name : 구분자, 명칭, 같은 그룹은 값이 같아야 함

          -> value : 전송 시 전달할 값

          -> checked : 처음에 선택될 값 지정(default : 지정 안 됨)

 

 

     > file

       -> <input type=file name="명칭" [multiple]>

       -> 속성

          -> multiple : 파일 다중 선택 가능

 

     > image

       -> <input type="image" name/id="명칭" src="경로" alt="대체문자">

       -> 속성

          -> name/id : type 이름

          -> src : 출력할 이미지 경로 지정

 

 

     >  submit / reset

       -> <input type=submit/reset id="명칭" value="입력/취소">

       -> 속성

          -> value : button에 표시될 값

 

 

     >  label

       -> <form>요소에 레이블(명칭)을 붙이기 위한 태그

       -> 레이블 : 입력 창 옆에 붙여 놓는 문구(예 : 비밀번호, 아이디 등)

       -> <input type=button id="명칭" value="값" onclick="스크립트함수">

       -> 속성

          -> for : label로 묶을 id

          -> form : label이 속한 form의 id

 

 

     >  type HTML5 양식 태그(속성)

       -> color : 색상 선택 양식 출력

       -> date : 년, 월, 일 선택 양식 생성

       -> datetime : 년, 월, 일 시간 입력할 수 있는 창 출력

       -> datetime-local : 년, 월, 일 시간 선택 양식 생성

       -> time : 시간을 선택하는 양식 생성

       -> month : 년, 월 선택 양식 생성

       -> week : 주 선택하는 양식 생성

       -> number : 숫자를 입력하는 창 출력

       -> range : 슬라이드 막대로 숫자 지정

       -> search : 검색어 입력하는 창 출력, 입력 후 X버튼이 생김

       -> tel : 전화번호를 입력하는 창 출력 (컴퓨터가 자동으로 번호임을 인식)

       -> email : 자동으로 @을 확인하는 입력 양식

       -> url : 주소 값을 입력하는 창 출력(http://가 들어가 있는지 확인)

 

 

     >  type 종류 - color

       -> <input type="color" name="명칭" value="색상 값">

       -> 속성

          -> value : 초기 색상 지정

 

 

     >  type 종류 - date / datetime / datetime-local / month / week

       -> <input type="타입 명" id="명칭" min="날짜" max="날짜" step="숫자" value="날짜">

       -> 속성

          -> min : 최소 표시 날짜 지정(예 : 1988-01-01)

          -> max : 최대 표시 날짜 지정(예 : 2020-12-31)

          -> step : 날짜 표현 간격, 달력에서 선택 시 선택 안 됨

          -> value : 초기 표시 날짜 지정

 

 

     >  type 종류 - time

       -> <input type="time" id="명칭" value="시간">

       -> 속성

          -> id / name : 구분자, 이름 지정

          -> value : 초기 표현 값

 

 

     >  type 종류 - number / range

       -> <input type="number/range" id="명칭" min="숫자" max="숫자" step="숫자" value="숫자">

       -> 속성

          -> min : 최소 표시 숫자 지정

          -> max : 최대 표시 숫자 지정

          -> step : 숫자 간격 지정

          -> value : 초기 표현 값

 

 

     >  type 종류 - search / url / email

       -> <input type="search/url/email" id="명칭" value="초기값">

       -> 속성

          -> id / name : 구분자, 이름 지정

          -> value : 초기 표현 값

 

 

     >  여러 값 표현 태그

       -> select : 드롭다운 목록으로 값을 입력

       -> option : list에서 옵션값으로 지정

       -> optgroup : list목록을 그룹으로 묶을 때 사용

       -> datalist : input태그에서 리스트 형식으로 할 때 사용

       -> textarea : 여러 줄 입력하는 텍스트 영역

 

 

     >  태그 종류

     > <select></select>와 <option></option>

       -> select 속성

          -> size : 화면에 표시될 항목 개수 지정

          -> multiple : 여러 항목 선택 지정, ctrl 누른 상태에서 선택

       -> option 속성

          -> value : 옵션 선택 시 넘겨질 값

          -> selected : 기본으로 선택된 값

 

 

     > <optgroup></optgroup>

       -> optgroup 속성

          -> label : 목록 제목으로 출력될 내용

 

 

     > <datalist></datalist>와 <option></option>

       -> datalist 속성

          -> size : 화면에 표시될 항목 개수 지정

          -> multiple : 여러 항목 선택 지정, ctrl 누른 상태에서 선택

       -> option 속성

          -> value : 옵션 선택 시 넘겨질 값

          -> selected : 기본으로 선택된 값

 

 

     > <progress></progress>

       -> 작업 진행 상태를 나타내는 태그

       -> <progress value="숫자" max="숫자"></progress>

       -> 속성

          -> value : 화면에 표시될 항목 개수 지정

          -> max : 최대 값

 

 

     > <meter></meter>

       -> 값이 차지하는 크기 표시

       -> <meter value="값" min="값" max="값"></meter>

       -> 속성

          -> value : 화면에 표시될 항목 개수 지정

          -> max/min : 범위의 최대/최소 값

          -> low/high : 낮/높다고 할 정도의 값 지정

          -> optimum : 적당하다 할 정도의 값 지정

 

 

 

     > 실습 코드와 출력 결과

    <h3>텍스트와 관련된 input 태그들</h3>
<form>
        <h4>type="text"</h4>
        <p>
            - 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자이다.
        </p>
 
        <label>
            아이디 : <input type="text" size="20" value="kh" name="userId"
                      maxlength="10" placeholder="아이디를 입력해주세요.">
        </label>
 
        <h4>type="text" 에서 새로 추가된 기능</h4>
        <p>
            datalist 태그를 사용하여 텍스트 필드에서 데이터 목록 중에서 값을 선택하도록 만들 수 있다.
        </p>
        <label>
            색상 <input type="text" name="color" list="myColors">
        </label>
 
        <datalist id="myColors">
            <option value="black">검정색</option>
            <option value="white">흰색</option>
            <option value="skyblue">하늘색</option>
        </datalist>
 
        <h4>type="password"</h4>
        <p>
            - 비밀번호를 입력할 수 있는 텍스트 상자이다.
        </p>
 
        <label>
            비밀번호 : <input type="password" name="userPwd" size="20"
                        maxlength="15" placeholder="비밀번호를 입력해주세요." required>
        </label>
 
        <h4>type="search", type="url", type="email", type="tel"</h4>
        
        <p>
            겉모습은 텍스트 필드와 비슷하지만 각각의 정보에 맞게 세분화된 기능을 제공하는 텍스트 상자이다.
        </p>
 
        <label>
            검색 : <input type="search" name="searchText" placeholder="검색할 내용 입력">
        </label>
 
        <br>
        <br>
 
        <label>
            홈페이지 : <input type="url" name="homePage" value="http://">
        </label>
 
        <br>
        <br>
 
        <label>
            이메일 : <input type="email" name="email" placeholder="이메일을 입력하세요.">
        </label>
 
        <br>
        <br>
 
        <label>
            전화번호 : <input type="tel" name="phone" placeholder="전화번호를 입력하세요.">
        </label>
 
        <p></p>
 
        <input type="submit" value="전송">
        <input type="reset" value="다시입력">
 
    </form>
 
    <h3>숫자와 관련된 input 태그들</h3>
 
    <form>
        <h4>type="number"</h4>
        <p>
            입력창에 숫자를 입력하는 것이 기본이지만, 브라우저에 따라서 스핀 박스가 표시되기도 한다.
            (스핀 박스 : 입력창 오른쪽에 위/아래 화살표 버튼
                * 브라우저에서 지원을 안 해줄 수도 있다.)
        </p>
        
        <label>
            수량 : <input type="number" name="amount" value="10" step="10" min="0" max="100">
        </label>
 
        <h4>type="range"</h4>
        <p>
            슬라이드바를 통한 숫자 지정 가능
        </p>
 
        <input type="range" name="point" value="100"
            min="0" max="1000" step="100" style="width: 300;">
        
        <br><br>
 
        <input type="submit" value="전송">
        <input type="reset" value="다시입력">
    </form>
 
    <hr>
 
    <h3>날짜/시간 관련된 input 태그</h3>
    <form>
        <h4>type="date|month|week|time|datetime|datetime-local"</h4>
        <label for="dateIn">data : </label>
        <input type="date" name="dateIn" id="dateIn" value="2021-05-15">
 
        <br><br>
 
        <label for="monthIn">month : </label>
        <input type="month" name="monthIn" id="monthIn" value="2021-05">
 
        <br><br>
 
        <label for="weekIn">week : </label>
        <input type="week" name="weekIn" id="weekIn">
 
        <br><br>
 
        <label for="timeIn">time : </label>
        <input type="time" name="timeIn" id="timeIn" value="23:30">
 
        <br><br>
 
        <!-- chrome, edge 지원 X -> datetime-local로 대체 -->
        <label for="datetimeIn">datetime : </label>
        <input type="datetime" name="datetimeIn" id="datetimeIn">
 
        <br><br>
 
        <label for="dtIn">datetime-local : </label>
        <input type="datetime-local" name="dtIn" id="dtIn" value="2021-03-15T23:30:30">
 
        <br><br>
 
        <input type="submit" value="전송">
        <input type="reset" value="다시입력">
    </form>
 
    <hr>
 
    <h3>라디오 버튼과 체크박스 태그</h3>
 
    <form>
        <h4>type="radio"</h4>
        <p>
            여러 항목 중 한 가지만 선택해야 할 경우에 사용하는 태그이다<br>
            라디오 버튼의 경우 관련된 버튼끼리는 name 속성이 같아야 하나만 선택이 가능하다.
            value 속성은 선택한 라디오 버튼이나 체크박스의 서버로 넘길 값을 지정한다.
            checked 속성은 기본적으로 선택할 항목이 있다면 사용한다.
        </p>
 
        <label>성별 : </label>
        <label><input type="radio" name="gender" value="M">남자</label>
        <label><input type="radio" name="gender" value="F" checked>여자</label>
        
        <h4>type="checkbox"</h4>
 
        <label>취미 : </label>
        <p>
            여러 항목들 중 항목을 중복 선택해야 할 경우에 사용하는 태그이다<br>
            체크박스의 경우 관련된 체크박스끼리는 name 속성이 같아야한다.
            value 속성은 선택한 라디오 버튼이나 체크박스의 서버로 넘길 값을 지정한다.
            checked 속성은 기본적으로 선택할 항목이 있다면 사용한다.
        </p>
        <label><input type="checkbox" name="hobby" value="basketball"> 농구</label>
        <label><input type="checkbox" name="hobby" value="baseball"> 야구</label>
        <label><input type="checkbox" name="hobby" value="football"> 축구</label>
        <label><input type="checkbox" name="hobby" value="game"> 게임</label>
 
        <br><br>
 
        <input type="submit" value="전송">
        <input type="reset" value="다시입력">
    </form>
 
    <hr>
 
    <h3>추가 input 태그들</h3>
 
    <form>
        <h4>type="color"</h4>
        <label for="color">색상 선택 : </label>
        <input type="color" name="color" id="color">
 
        <h4>type="file"</h4>
        <label for="file">파일 선택 : </label>
        <input type="file" name="uploadfile" id="file">
 
        <h4>type="hidden"</h4>
        <label for="hiddenValue">안 보임 : </label>
        <!-- 특정 값을 화면에 노출시키지 않고 싶은 경우 사용 -->
        <input type="hidden" name="hiddenValue" id="hiddenValue" value="10">
 
        <h4>type="button", type="submit", type="reset"</h4>
        <input type="button" value="버튼">
        <input type="submit" value="전송">
        <input type="reset" value="다시 입력">
 
        <h4>button 태그를 사용</h4>
        <button>전송</button>
        <button type="submit" ><i><b>전송</b></i></button>
        <button type="reset">다시입력</button>
        <button type="button">버튼</button>
    </form>
 
    <hr>
 
    <h3>여러 값 표현 태그</h3>
 
    <form>
        <h4>select 태그와 option 태그</h4>
        <p>
            사용자가 내용을 입력하는 것이 아니고 여러 옵션 중에서 선택하게 하고 싶을 때 사용하는 드롭 다운 목록이다.
        </p>
        <label for="national">국적</label>
        <select name="national" id="national">
            <!-- <option value="">-----</option> -->
            <optgroup label="아시아">
                <option value="ko">한국</option>
                <option value="ch">중국</option>
                <option value="jp">일본</option>
            </optgroup>
            <optgroup label="아메리카">
                <option value="us" label="미국"></option>
            </optgroup>
            <optgroup label="유럽">
                <option value="fr" label="프랑스"></option>
            </optgroup>
            <option selected>-----</option>
        </select>
 
        <br><br>
 
        <h4>textare 태그</h4>
        <p>
            type="text"와 비슷하지만 여러 줄의 문자를 입력할 수 있다.
        </p>
 
        <textarea name="textarea" id="textarea" cols="45" rows="15"
            style="resize: none;" placeholder="내용을 입력해 주세요."></textarea>
        
        <h4>progress</h4>
        <p>
            작업 진행 상태를 나타내는 태그이다.<br>
        </p>
        <progress value="30" max="100"></progress>
 
        <h4>meter</h4>
        <!-- ex. 하드웨어 용량, 투표율 등 해당 값이 전체중에 어느정도인지 나타낸다. -->
        <meter min="0" max="100" value="70" low="60" high="70"></meter>
 
        <br><br>
 
        <input type="submit" value="전송">
        <input type="reset" value="다시입력">
    </form>
</body>
</html>

 

 

 

 

 

     > HTML 종합 실습 문제 1 _ 내가 했던 방법

 

<!DOCTYPE html>
<html lang="ko">
<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>종합 실습 문제 1</title>
</head>
<body>
    <h1>납품관리</h1>
 
    <form autocomplete="off">
        <fieldset>
            <legend>납품자 정보</legend>
 
            <label>1. 납품자명 : <input type="name" name="name" placeholder="name"></label><br><br>
            <label>2. email : <input type="email" name="email" placeholder="answs@naver.com"></label><br><br>
            <label>3. 홈페이지 : <input type="url" name="url" placeholder="http://"></label><br>
        </fieldset>
        
        <br>
 
        <fieldset>
            <legend>납품 정보</legend>
 
            <li><label>상품명 : <input type="name" name="proname"></li></label><br>
            <li><label>납품수량 : <input type="number" name="amount" placeholder="최소 100" min="100"></li></label><br>
            <li><label>납품등급 : <input type="range" name="point" value="100" min="0" max="1000" step="100" style="width: 300;"></li></label><br>
            <li><label>기타 : <textarea name="textarea" id="textarea" cols="20" rows="2" style="resize: none;" ></textarea></li></label>
 
        </fieldset>
        <br>
        <button type="submit">send message</button>
    </form>
</body>
</html>

 

 

     > HTML 종합 실습 문제 2 _ 내가 했던 방법

 

<!DOCTYPE html>
<html lang="ko">
<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>종합 실습 문제2</title>
 
</head>
<body>
    <h1>회원가입</h1>
 
    <form autocomplete="off">
        <fieldset>
            <fieldset>
                <legend>필수 입력 사항</legend>
                    <label><b>ID</b> <input type="text" size="30" name="userId" maxlength="10" placeholder="아이디 10글자 이내"> <input type="submit" value="중복 확인"></label><br>
                    <label><b>비밀번호 </b><input type="password" size="30" name="userPwd" minlength="8" placeholder="영문, 숫자, 특수문자 포함 8자 이상"></label></label><br>
                    <label><b>비밀번호 확인 </b><input type="password" size="30" name="userPwd"></label><br>
                    <label for="Email"><b>Email </b></label>
                    <input type="emailId" name="emailId" size="30">
                    <select name="Email" id="Email">
                        <option value="naver">naver.com</option>
                        <option value="gmail">gmail.com</option>
                        <option value="daum">daum.net</option>
                    <option selected>직접입력</option>
                    </select>
            </fieldset>
 
            <fieldset>
                <legend>추가 정보</legend>
                    <label for="file">프로필 사진 : </label>        <input type="file" name="uploadfile" id="file"><br><br>
                    <label>성별 : </label>
                        <label><input type="radio" name="gender" value="M" checked>남자</label>
                        <label><input type="radio" name="gender" value="F">여자</label>
                    <br><br>
                    <label for="dataIn">생년월일 : </label>
                        <input type="date" name="dateIn" id="dateIn" value="연도-월-일">
                    <br><br>
                    <label>취미</label><br>
                        <label><input type="checkbox" name="hobby" value="baseball"> 야구</label>
                        <label><input type="checkbox" name="hobby" value="basketball"> 농구</label>
                        <label><input type="checkbox" name="hobby" value="football"> 축구</label><br>
                        <label><input type="checkbox" name="hobby" value="study" checked> 공부</label>
                        <label><input type="checkbox" name="hobby" value="music"> 음악감상</label><br>
                        <label><input type="checkbox" name="hobby" value="etc"> 기타 : <input type="text" name="hobby"></label>
                    <br><br>
                    <label>자기소개</label><br>
                        <textarea name="textarea" id="textarea" cols="40" rows="4"
                        style="resize: none;"></textarea>
            </fieldset>
            <br>
            <input type="submit" value="회원가입">
            <input type="reset" value="다시입력">
            <input type="button" value="이전으로">
        </fieldset>
    
 
    </form>
</body>
</html>

 

 

 

 

     > HTML 종합 실습 문제 2 _ 강사님이 했던 방법

 

<!DOCTYPE html>
<html lang="ko">
<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>종합 실습 문제 2</title>
</head>
<body>
    <h1>회원가입</h1>
 
    <form>
        <fieldset>
            <legend>필수 입력 사항</legend>
            <table>
                <tr>
                    <th>ID</th>
                    <td>
                        <input type="text" name="userId" id="userId" size="30" placeholder="아이디 10글자 이내">
                    </td>
                    <td>
                        <button>중복확인</button>
                    </td>
                </tr>
                <tr>
                    <th>비밀번호</th>
                    <td colspan="2">
                    <input type="password" name="userPwd" id="userPwd" size="30" placeholder="영문, 숫자, 특수문자 포함 8자 이상">
                    </td>
                </tr>
                <tr>
                    <th>비밀번호 확인</th>
                    <td colspan="2">
                        <input type="password" name="userPwd2" id="userPwd2" size="30" placeholder="영문, 숫자, 특수문자 포함 8자 이상">
                    </td>
                </tr>
                <tr>
                    <th>Email</th>
                    <td>
                        <input type="email" name="email" id="email" size="30">
                    </td>
                    <td>
                        <select name="emailAddr" id="emailAddr">
                            <option value="">naver.com</option>
                            <option value="">gmail.com</option>
                            <option value="">daum.net</option>
                            <option value="" selected>직접입력</option>
 
                        </select>
                    </td>
                </tr>
            </table>
        </fieldset>
 
        <fieldset>
            <legend>추가 정보</legend>
 
            <label>프로필 사진 : <input type="file" name="profile" id="profile"></label>
 
            <br><br>
            
            <label>성별</label>
            <label><input type="radio" name="gender" value="" checked>남자</label>
            <label><input type="radio" name="gender" value="">여자</label>
            
            <br><br>
 
            <label>생년월일 : <input type="date" name="birth" id="birth"></label>
 
            <br><br>
 
            <label>취미</label>
 
            <br>
 
            <label><input type="checkbox" name="hobby" value="">야구</label>
            <label><input type="checkbox" name="hobby" value="">농구</label>
            <label><input type="checkbox" name="hobby" value="">축구</label>
            
            <br>
            <label><input type="checkbox" name="hobby" value="" checked>공부</label>
            <label><input type="checkbox" name="hobby" value="">음악감상</label>
            
            <br>
            <label><input type="checkbox" name="hobby" value="" disabled checked>기타 : </label>
            <input type="text" name="etcText" >
 
            <br><br>
 
            <label>자기소개</label>
 
            <br>
 
            <textarea name="introduce" cols="50" rows="5" style="resize: none;"></textarea>
        </fieldset>
 
        <p></p>
        &nbsp;&nbsp;&nbsp;
 
        <button type="submit">회원가입</button>
        <button type="reset">다시입력</button>
        <button type="button">이전으로</button>
    </form>
</body>
</html>

       -> 필수 입력 사항을 테이블로 만들 생각을 못 했다.

 

 

       -> HTML, CSS, Javascript의 간략한 차이