본문 바로가기
FRONT-END/HTML

폼태그

어굴애 2021. 4. 8. 18:25

 라벨을 만드는 방법 

1. <label> 안에 <input>을 넣는다.

<label id = "name2"> 이름2 <input type = "text" title = "이름2"></label> <br><!--단락이 바뀌면 <p>, 단순히 내릴거면 <br>-->

 

2.<label> 뒤에 쓰되, 키(id)를 같게 준다.

<label for = "school1"> 학교명1 </label> <input id="school1" type = "text" title = "학교명1">

 

 <form action="search.jsp" method="get" autocomplete="on">
        <label for = "id"> 아이디 </label>  <input id="id" type="text"> 
        <label for="pw"> 비밀번호  </label> <input name="pw" id="pw" type="password" >
    </form>

 

<body>
    <!-- <form action = "search.jsp " method ="post"> -->
    <form action = "search.jsp" method="get" autocomplete="on">
        <label id = "name1"> 이름1 <!--라벨의 위치 지정--><input type = "text" title="이름1"></label> <br>
        <label id = "name2"> 이름2 <input type = "text" title = "이름2"></label> <br><!--단락이 바뀌면 <p>, 단순히 내릴거면 <br>-->
        <label for = "school1"> 학교명1 </label> <input id="school1" type = "text" title = "학교명1">
        <input type = "submit" title = "검색">
    </form>    
</body>

 

 

 

라디오버튼과 체크박스 만들기

name은 보이는 것 뿐, 실제로 전송되는 건 value

체크박스는 다수 선택이 가능하기 때문에 변수명이 다달라야한다(s1,s2,s3)

라디오버튼은 단일 선택이라 변수명을 같게 주어야 한다( name = "subject")

 

작은 기기에서 체크박스, 라디오버튼을 터치하기 어렵기 때문에 이름까지 label로 감싸주는 게 좋다.

            <label><li><input type = "checkbox" name = "s1" value = "grm"> 문법 </li> </label>
            <label><li><input type = "checkbox" name = "s2" value = "wr"> 작문 </li></label>
            <label><li><input type = "checkbox" name = "s3" value = "rd"> 독해 </li></label>

더보기 
 <!-- 라디오 버튼과 체크박스 만들기-->
    <form  action="post" name = "a1.jsp">
       <h3> 수강분야(다수선택 가능) </h3>
       <ul>
            <label> <li> <input type="checkbox" name = "s1"  value="grm"> 문법  </li> </label>
            <label> <li> <input type="checkbox" name = "s2" value="wr"> 작문  </li>  </label>
            <label for="s3"> </label> <li>  <input type="checkbox" id = "s3" name = "s3" value="rd"> 독해 </li>
       </ul>
       <h3> 수강과목(1과목만 선태 가능</h3> 
       <ul>
           <li> <label> <input type="radio"  name = "subject"  value="eng"> 영어회화    </li>  </label> 
           <li> <input type="radio"  name = "subject"  value="ch"> 중국어회화    </li>
           <li> <input type="radio"  name = "subject"  value="jp"> 일어 회화   </li>
       </ul>

    </form>
<head>
    <style>
        ul{
            list-style : none;
        }
    </style>
</head>
<body>
    <!--라디오 버튼과 체크박스 만들기-->
    <form action="post" name = "a1.jsp">
        <h3> 수강분야(다수선택 가능)</h3>
        <ul>
            <li><input type = "checkbox" name = "s1" value = "grm"> 문법 </li> <!--보내기 버튼 누르면 value가 서버로 전송됨-->
            <li><input type = "checkbox" name = "s2" value = "wr"> 작문 </li>
            <li><input type = "checkbox" name = "s3" value = "rd"> 독해 </li>
        </ul>
        <h3> 수강과목(1과목만 선택 가능)</h3>
        <ul>
            <li><input type = "radio" name = "subject"> 영어회화</li>
            <li><input type = "radio" name = "subject"> 일어회화</li>
            <li><input type = "radio" name = "subject"> 중국어회화</li>
        </ul>
    </form>
    
</body>
</html>

 

#HTML에서 스페이스바(공백)

&nbsp;

스페이스바를 많이 눌러도 한번밖에 적용되지 않기 때문에 이용한다.

 

 

 

 아이디와 비밀번호 서버로 전송하기 

- <label> 태그를 달아주는 습관 필요

   <label for = "irum"> 이름 </label><input type = "text" id = "irum" name = "irum"  size = 6 value ="홍길동" maxlength="10">

   id 속성은 태그를 구분하기 위한 것, name 속성은 서버로 자료를 넘길 때 필드로 쓰이는 값, value는 화면에 표시되는 초기값

   size는 화면에 표시되는 텍스트 필드의 길이, maxlength는 입력할 수 있는 최대 텍스트 길이 (글자수는 아님)

 

- 비밀번호는 hidden으로

   <input type = "hidden" name = "암호" value = "화면에는 안보이지만 서버엔 들어감"> 

-  send를 누를 경우 아이디와 비밀번호가 submit(전송)되는데, 아래 이미지와 같이 주소를 참고하면 어떤 값들이 넘어갔는지 알 수 있다

 

더보기 
    <form action = "post" name = "a1.jsp">
        <input type = "hidden" name = "암호" value = "화면에는 안보이지만 서버엔 들어감"> <!--폼을 서버에 전송할 때 함께 전송되는 value-->
        <label for = "irum"> 이름 </label><input type = "text" id = "irum" name = "irum"  size = 6 value ="홍길동" maxlength="10">
        <!-- size : 텍스트 필드의 길이 (화면에 보이는 글자) maxlength : 최대 쓸 수 있는 글자 -->
        id는 input 태그와의 연결고리로서 태그를 구분, name은 서버로 실제로 넘어가는 변수, value는 화면에 표시
        <label for = "pw"> 비밀번호 </label><input type = "password" id = "pw" name = "pw1" size="20" value="1234">
        <!-- value : 초기값 -->
        <input type = "submit" value = "send">
    
    </form>    
</body>
</html>

 

 

노출이 잘되는 홈페이지를 만들려면 웹표준 맞추어서 태그를 만들어야 한다.

반응형 웹페이지 : 브라우저마다, 기기마다 같은 웹페이지인데 보여지는 게 다르다

 

회원가입 만들기

    <style>
       ul{
           list-style: none;
       }
       li{
           margin: 10px;
       }
       li label{
           width: 120px;
           float: left;
           text-align: right;
           padding-right: 8px;
       }
       input[type="submit"]{
           text-align: center;
           width: 100%;
           height: 30px;
           margin-top: 15px;
       }
    </style> 

</head>
<body>
    <h1> 회원가입 </h1>
    <form name="form1.jsp">
        <fieldset>
            <legend> 로그인 정보 </legend>
            <ul>
                <li>
                    <label for="user-id"> 아이디 </label>
                    <input type="text" id="user-id"> 
                </li>
                <li>
                    <label for="pw1"> 비밀번호 </label>
                    <input type="password" id="pw1">
                </li>
                <li>
                    <label for="pw2"> 비밀번호확인 </label>
                    <input type="password" id="pw2">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend> 개인 정보 </legend>
            <ul>
                <li>
                    <label for="user-name"> 이름 </label>
                    <input type="text" id="user-name"> 
                </li>
                <li>
                    <label for="mail"> 메일주소 </label>
                    <input type="email" id="mail">
                </li>
                <li>
                    <label for="phone"> 연락처 </label>
                    <input type="tel" id="phone">
                </li>
                <li>
                    <label for="blog-homepage"> 블로그/홈페이지 </label>
                    <input type="url" id="blog-homepage">
                </li>
            </ul>
        </fieldset>
        <input type="submit" value="가입하기">
    </form>
</body>
</html>

 

 

 

 

type : number와 range 차이

<form name="form1.jsp"> 

        <input type = "number" min="1" max="5" value="1"> <!--number로 타입을 주면 1~5까지의 수 선택--><br>

        <label for="score1"> 점수 </label>

        <input type = "range" id="score1" min="0" max="100" step="5" value="50"><br>

        <input type = "number" id="score1" min="0" max="100" step="5" value="50"><br>

        

    </form>

 

더보기 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        ul{
            list-style:none;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend> 등록정보 </legend>
        <ul>
            <li>
                <label for = "reg"> 참여인원 <small>(최대인원:10명) </small> </label>
                <input type = "number" id = "reg" value = "1" min = "0" max = "10" step = "1">
            </li>
            <li>
                <label for = "reg2"> 지원물품  <small>(1인당 5개) </small> </label>
                <input type = "number" id = "reg2" value = "1" min = "0" max = "3" step = "1">
            </li>
            <li>
                <label for = "reg3"> 희망단계 <small> (상, 중, 하) </small></label>
                <input type = "range" id = "reg3" value = "1" min = "1" max = "3" step = "1">
            </li>
        </ul>
    </fieldset>
    
</body>
</html>

 

 

예제 (구현 하다 말았음)

 

색상 선택 옵션

  선호색상 <label for = "t"> </label> <input type = "color" id = "t" name = "tColor" value = "#00ff00">

 

image

단순 이미지 뿐만 아니라 submit기능도 함께 수행

<input type = "image" src = " 폴더명/파일명.확장자" alt = "메모">

 

button

단순 버튼

<input type = "button" value = "새탭열기" onclick="window.open()"

 

파일첨부

<input type = "file" name = "fileData">

 

#autofocuse required : 필수입력

<input type = "text" id = "name" autofocus required placeholder = "공백없이 입력">

커서가 깜빡이게 됨

placeholder는 비밀번호 힌트 입력할 때 (강제성은 없고 힌트만 줌)

 

 

#readonly : 읽기전용, 수정 불가

<label> 비밀번호 <input type = "text" value = "이젠학원" readonly> </label> <!--readonly : 읽기전용 수정 불가-->

 

 

더보기 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>form 예제</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        ul{
            list-style:none;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <form action= "get" name ="a1.jsp">
        <fieldset>
        <legend><b> 신청 과목</b> </legend>
        <p> 이 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
                <label for = "subject" name= "subject"></label><input type = "radio" name = "subject" value = "speaking"> 회화 
                <label for = "subject2" name= "subject"></label><input type = "radio" name = "subject" value = "grammar"> 문법
                <label for = "subject3" name= "subject"></label><input type = "radio" name = "subject" value = "writing"> 작문
        </fieldset>
        <fieldset>
        <legend><b> 메일링 </b> </legend>
        <p> 메일로 받고 싶은 뉴스 주제를 선택하세요 (복수 선택 가능)</p>
                <label for = "topic"></label><input type = "checkbox" id = "topic" name = "mail1" value = "globalNews"> 해외단신
                <label for = "topic2"></label><input type = "checkbox" id = "topic2" name = "mail2" value = "5speaking"> 5분회화
                <label for = "topic3"></label><input type = "checkbox" id = "topic3" name = "mail3" value = "morningPops"> 모닝팝스 
        </fieldset>
        <fieldset>
        <legend><b> 과 티셔츠 설문 </b> </legend>
        <p>올해 과티(T-shirt)를 만드려고 합니다. 원하는 색상을 선택해주세요.</p>
             선호색상 <label for = "t"></label><input type = "color" id = "t" name = "tColor" value = "#00ff00">
            </fieldset>
            
            <fieldset>
            <legend>조회기간 선택</legend>
            <label><input type="time" id = "start" min = "00:00" max = "23:59" step = "00:05" value = "13:00"></label>
            <label><input type="date" id = "end" value=""></label>
        </fieldset>
        <fieldset>
            <legend> 메일링 리스트 등록</legend>   
                메일주소<label for = "mail"></label><input type = "email" id="mail" name = "emailName">
        </fieldset>
        <fieldset>
            <legend> 이미지 버튼 넣기</legend>
            <label> 아이디<input type = "text" name = "idName" id= "idName"></label>
            <label> 비밀번호<input type = "password" name = "passwordName" id= "pwd"></label>
            <input type = "image" src="images/login.jpg" alt="로그인이미지"> <!--image 타입은 submit+ image : submit 버튼 대신에 이미지를 넣어 전송할 수 있음-->
            <input type = "button" value = "새탭열기" onclick="window.open()"><!--button 타입은 단순 버튼 기능-->
            <label> 첨부파일 <input type = "file" name ="fileData"></label>
        </fieldset>
        <fieldset>
            <legend> 태그의 다양한 속성 배우기</legend>
            <label class = "reg" for = "name"> 이름 </label>
            <input type = "text" id = "name" autofocus required placeholder="공백 없이 입력">
            <label> 비밀번호 <input type = "text" value = "이젠학원" readonly> </label> <!--readonly : 읽기전용 수정 불가-->
        </fieldset>
        <fieldset>
            <legend> 교재수령 </legend>
            <label> <input type = "number" name = "bookCount" value = "10" min = "10" max = "100" step = "5"></label> 
            <label> 아이디 <input type = "text" size = "10" minlength="4" maxlength="15"></label>
            <small style= "color:red"> 4~15자리 이내의 영문과 숫자 </small>
        </fieldset>
        <input type = "submit" value = "제출">
        <input type = "reset" value = "취소(다시입력)">
    </form>
</body>
</html>

 

form의 style지정

.container

- witdth : 컨테이너 크기

- margin : 여백 지정label> 안에 <input>을 넣는다.

 

 

 

 

 

 

 

 

 

주문리스트 만들기 예제

 

주문하기, 다시작성 버튼이 가운데 정렬되어야 하는데 코드에 오류있음

 

더보기 
<!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'>
    <title>상품 주문서</title>
    <style>
            /* <!--클래스 컨테이너 영역--> */
        .container{  
            width : 600px;
            margin : 0 auto; /*마진의 위아래 여백, 사실상 가운데 정렬(양옆에서)*/
        }
        ul{
            list-style: none;
        }
        label.title{
            font-weight: bold; /*굵은 글씨*/
            width: 80px; /*라벨이름 칸 크기를 지정해서 모든 라벨이 같은 크기를 가지도록*/
            float: left; /*왼쪽 같은 위치에서 시작*/
        }
        div.centered{
            /*주문하기, 다시작성 가운데 정렬*/
            text-align: center;
        }
        fieldset{
            margin: 15px 10px;  /*상하 여백 15px 좌우 10px*/
        }
        fieldset legend{
            font-weight: bold;
            font-size: 18px;
            color:chocolate;
        }
        ul li{
            margin-bottom: 10px; /*줄간격비슷..*/
        }
    </style>
</head>
<body>
    <div class = "container">
        <h1> 상품주문서 </h1>
        <form action = "get" name = "order.jsp">
            <fieldset>
                <legend> 개인정보 </legend>
                <ul>
                    <li>
                        <label for = "uname" class ="title"> 이름</label>
                        <input type = "text" id ="uname" placeholder="여백없이 입력" required>
                    </li>
                    <li>
                        <label for = "tel1" class ="title"> 연락처 </label>
                        <input type = "text" id = "tell" placeholder="연락가능한 번호">
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <legend> 배송지정보 </legend>
                <ul>
                    <li>
                        <label for = "addr" class="title"> 주소</label>
                        <input type = "text" size = "40" id = "addr" required>
                    </li>
                    <li>
                        <label for = "tel2" class="title"> 전화번호 </label>
                        <input type = "tel" size = "40" id = "tel2" required>
                    </li>
                    <li>
                        <label for = "comment" class = "title"> 메모</label>
                        <textarea cols="40" rows="3" id="comment"></textarea>
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <legend> 주문정보</legend>
                <ul>
                    <li>
                        <label><input type = "checkbox"> 과테말라 안티구아 (100g)</label> 
                        <label><input type = "number" value = "0" min="0" max="5"></label> 개
                    </li>
                    <li>
                        <label><input type = "checkbox"> 인도네시아 만델링 (100g)</label>
                        <label><input type = "number" value = "0" min="0" max="5"></label> 개
                    </li>
                    <li>
                        <label><input type = "checkbox"> 탐나는도다(블렌딩) (100g)</label>
                        <label><input type = "number" value = "0" min="0" max="5"></label> 개
                    </li>
                </ul>
            </fieldset>
            <input type ="submit" value = "주문하기">
            <input type = "reset" value = "다시 작성">
        </form>
    </div>
</body>
</html>

 

option, 데이터리스트

 

option + optgroup

            <label class = "reg" for = "dept"> 학과 </label> <input type = "text" id = "dept">

            <select size = "5" id ="dept" multiple>

                           size 속성은 한번에 보여주는 줄의 수

        <optgroup label = "공과대학">

            <option value = "archi" name = "deptName"> 건축공학과 </option>

 

데이터리스트태그

            <input type = "text" id = "interest" list = "choice">

            <datalist id="choice">  input의 list와 datalist id가 일치해야 함

 

더보기 
    <div class = "container">
        <h1> 여름방학 특강 신청 </h1>
        <fieldset>
            <legend> 수강 신청인</legend>
            <label class = "reg" for = "studentNo"> 학번 </label> <input type ="text" id = "stduentNo">
            <label class = "reg" for = "name"> 이름 </label> <input type = "text" id = "name">
            <label class = "reg" for = "dept"> 학과 </label> <input type = "text" id = "dept">
            <select size = "5" id ="dept" multiple> <!--size 속성은 한번에 보여주는 줄의 수-->
                <optgroup label = "공과대학">
                    <option value = "archi" name = "deptName"> 건축공학과 </option>
                    <option value = "merchanic" name = "deptName"> 기계공학과 </option>
                    <option value = "indust" name = "deptName"> 산업공학과 </option>
                    <option value = "elec" name = "deptName"> 전기전자공학과 </option>
                    <option value = "computer" name = "deptName" selected> 컴퓨터공학과 </option> <!--컴공이 많을 때 미리 선택되도록-->
                    <option value = "chemical" name = "deptName"> 화학공학과 </option>
                </optgroup>
                <optgroup label = "인문대학">
                    <option value = "history" name = "deptName"> 사학과</option>
                    <option value = "lang" name = "deptName"> 어문학과</option>
                    <option value = "philo" name = "deptName"> 철학과</option>
                    <option value = "english" name = "deptName"> 영어영문학과</option>
                </optgroup>
            </select>
        </fieldset>
        <fieldset>
            <legend> 데이터리스트 태그 </legend>
            <input type = "text" id = "interest" list = "choice">
            <datalist id="choice">
                <option value="grammar" label = "문법"></option>
                <option value="vocabulary" label = "어휘"></option>
                <option value="speaking" label = "회화"></option>
                <option value="listening" label = "리스닝"></option>
                <option value="news" label = "뉴스청취"></option>
            </datalist>
        </fieldset>
        </div>

 

 

textarea (텍스트 입력란 만들기)

 <textarea cols="50" rows="10">

 

button과 input의 차이점

 ① 화면낭독기가 버튼인지, 인풋인지 다르게 읽어줌

 ② 버튼을 사용하면 이미지를 버튼에 함께 달 수 있다

 

oninput 태그(input을 넣어 output 계산)

        <form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">

            <input type ="number" name = "num1" value="0">

            + <input type ="number" name = "num2" value="0">

            = <output name = "result" for = "num"></output>

        </form>

 

진행상태 progress

        전체가 60인데 50까지 간 진행상태

        <progress value = "50" max="60">

        </progress>

 

전체중의 부분 비중 meter

점유율, 사용률, 트래픽초과율

<meter min="0" max="100" value="20"> </meter>

더보기 
       <!--비고란, 하고싶은 말-->
        <textarea cols="50" rows="10">
        </textarea>
        <button type = "button" value = "전송">
            <!--화면낭독기가 읽어줄 때 버튼인지 input인지 읽어주는 차이 시각장애인 위한 것-->
            <!--또한 버튼을 쓰면 img 태그를 함께 쓸 수 있다-->
            <img src = "images/gugudan-2.jpg"> 전송하기
        </button>
        <form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
            <input type ="number" name = "num1" value="0">
            + <input type ="number" name = "num2" value="0">
            = <output name = "result" for = "num"></output>
        </form>
        <!--전체가 60인데 50까지 간 진행상태, 진행중인 자료들-->
        <progress value = "50" max="60">
        </progress>
        <!--비중 전체중의 몇%-->
        <meter min="0" max="100" value="20"> </meter>

 

'FRONT-END > HTML' 카테고리의 다른 글

폼태그  (0) 2021.04.08
링크  (0) 2021.04.06
이미지  (0) 2021.04.06
테이블 스타일 관련 예제  (0) 2021.04.06
index-table 실습  (0) 2021.04.06

'FRONT-END/HTML' Related Articles

티스토리툴바