[3일] html (3) - 입력 양식, 블록, 레이아웃

입력 양식

로그인, 검색 창 등

​

요소(element) : <table> <img> <a> <audio> ...

속성(property, attribute) : width, height, border, src ...

 

다양한 폼 컨트롤 요소

1. <input> 요소

<input type="button">                  기능 없음
<input type="button" value="로그인">
<input type="button" value="검색">
<input type="button" value="등록">
<input type="button" value="입실">

<input type="submit" value="전송">     사용자가 입력한 정보를 서버로 전송
<input type="reset" value="취소">      사용자가 입력한 정보를 취소(원래대로 복귀)

<button>회원가입</button>              type="button" + type="submit"의 기능이 같이 있음

<input type="radio">                  중복 선택 불가
<input type="checkbox">               중복 선택 가능

<form> <!-- 사용자가 입력한 정보는 <form> 단위로 서버로 전송됨 -->
    <table border="1">
        <tr>
            <th>아이디</th>
            <td><input type="text"></td>
            <td rowspan="2">
                <input type="submit" value="로그인">
            </td>
        </tr>
        <tr>
            <th>비밀번호</th>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="checkbox">ID저장
                <input type="button" value="회원가입">
                <input type="button" value="아이디/비번찾기">
            </td>
        </tr>
    </table>
</form>

submit을 누르면 form이 전체 전송된다.

 

​

※ 주의사항

예) 잘못된 경우

<form>
    <form></form>
</form>

예) 잘 된 경우

<form></form>
<form></form>

<h3>회/원/가/입</h3>
<!-- id="javaScript나 jQuery 접근 시 주로 사용" -->
<!-- name="Backend단에서 접근 시 주로 사용" -->
<form id="memfrm" name="memfrm"> 
    이름 : 
    <input type="text" autofocus> <!-- autofocus : 커서가 미리 들어가 있음 -->
    <hr>

    아이디 :
    <input type="text"
           id="userid" 
           name="userid"
           size="10"
           maxlength="5"  <!-- 5자리까지만 입력 가능 -->
           placeholder="아이디입력해주세요"
           required> <!-- 반드시 입력해야 한다 -->
    <hr>

    비밀번호 :
    <input type="password"
           id="userpw" 
           name="userpw"
           size="12"
           maxlength="12"
           placeholder="비밀번호입력해주세요"
           required>
    <hr>

    우편번호 :
    <input type="text" size="5" readonly> <!-- readonly : 커서가 못 들어감 -->
    <input type="button" value="주소찾기">
    <hr>

    나이 :
    <!-- type="radio"의 name을 동일하게 주면 그룹이 생성되고, 한개만 선택할 수 있다. -->
    <input type="radio" name="age" value="10">10대
    <input type="radio" name="age" value="20">20대
    <input type="radio" name="age" value="30">30대
    <hr>

    성별 :
    <input type="radio" name="gender" value="m">남 <!-- 남에 체크하면 value값 m이 전송된다. -->
    <input type="radio" name="gender" value="f" checked>여
    <hr>

    취미 :
    <input type="checkbox" id="movie" name="movie" value="m">영화
    <input type="checkbox" id="cook" name="cook" value="c" checked>요리
    <input type="checkbox" id="book" name="book" value="b">독서
    <hr>
</form>

ctrl + space : 단축어 불러오기

id, name을 식별자라고 한다. 한글은 사용할 수 없다.

 

 

2. 여는 태그와 닫는 태그가 있는 폼 컨트롤 요소

<form id="myform" name="myform">
    <button>버튼1</button>
    <hr>

    생년월일 :
    <select id="myyear" name="myyear">
        <option value="2022">2022년</option>
        <option value="2021" selected>2021년</option>
        <option value="2020">2020년</option>
    </select>

    <!-- mutiple : Ctrl 이용해서 다중 선택 가능 -->
    <select id="mymonth" name="mymonth" multiple>
        <option value="1">1월</option>
        <option value="2">2월</option>
        <option value="3">3월</option>
        <option value="4">4월</option>
        <option value="5">5월</option>
    </select>
    <hr>

    배송메시지 :
    <textarea cols="50" rows="3" maxlength="200">200글자 이내로 입력해 주세요</textarea>
    <hr>

    <input type="submit" value="전송"> <!-- <form name="myform">이 서버로 전송됨 -->
    <input type="reset" value="취소">
</form>

value 값을 설정해두면 쓰레기 값을 줄일 수 있다.

 

참고

https://www.w3schools.com/html/html_form_input_types.asp

HTML Input Types

 

 

폼 관련 속성들

<h3>1. 폼 관련 속성들</h3>
<form>
    아이디:<input type="text" name="userid" action="ok.jsp"> <hr>
    비밀번호:<input type="password" name="userpw"> <hr>
    <input type="submit" value="전송">
</form>

action를 통해 Backend에서 동작하는 언어를 선택한다.​

• id="" 폼 아이디 (주로 Frontend 단에서 접근 시 사용)
• name="" 폼 이름 (주로 Backend 단에서 접근 시 사용)
• action="" 사용자가 입력 요청한 정보를 서버 쪽에서 받는 페이지 명 또는 명령어
• method="" 전송 방식 get 또는 post
• enctype=""

 

<!-- 파일 첨부해서 전송 -->
<form enctype="multipart/form-data">
    첨부파일 : <input type="file">
</form>

 

type=image

<form action="ok2.jsp">
    <img src="../images/angel.png">
    <hr>

    <!-- <img src=""> + type=submit 기능 -->
    <input type="image" src="../images/devil.png">
    <hr>

    검색 : <input type="text" name="search">
    <input type="image" src="../images/search.png">
    <hr>
</form>

검색창에서 돋보기 버튼 등에 사용한다.

 

다양한 Input Types

<!-- HTML 페이지에서 노출되지는 않지만 form에 포함된 컨트롤 요소 -->
<input type="hidden" id="page" name="page" value="3">
<input type="hidden" id="col" name="col" value="title">

<!-- 기타 다른 타입들 -->
<input type="number" id="quantity" name="quantity" min="1" max="5">
<hr>
<input type="range" id="vol" name="vol" min="0" max="50">
<hr>

<input type="color"><hr>
<input type="date"><hr>
<input type="search"><hr>
<input type="time"><hr>

 

label

<label for="user">이름 :</label>
<input type="text" id="user">

The <label> tag defines a label for several elements

 

참고

https://www.w3schools.com/html/html_forms_attributes.asp

HTML Form Attributes

 

블록 요소

워드 프로그램은 드래그로 블록을 지정해서 효과를 줄 수 있지만

html은 블록을 만들어 css 등을 적용해야 한다.

여는 태그와 닫는 태그가 존재하면 블록으로 할 수 있다.

​

• 특정 영역에 대해서 블록을 지정할 수 있다.
• 블록 요소의 크기는 자신이 감싸는 내용과 상관없이 자신의 영역을 가지고 있다.

<!-- 블럭이 없는 경우 -->
Text1
Text2
Text3
<hr>

<!-- 블럭이 있는 경우 -->
<div>Text1</div>
<div>Text2</div>
<div>Text3</div>
<hr>

<!-- 블럭 인용구 -->
<blockquote>Text1</blockquote>
<blockquote>Text2</blockquote>
<blockquote>Text3</blockquote>
<hr>

<pre>   <!-- 공백과 줄바꿈 가능-->  
    서울특별시
    강남구                 테헤란로
    삼원    타워     4층   아이티윌
</pre>

 

인라인 요소

<!-- 인라인 요소의 크기는 자신이 감싸는 내용과 밀접하며,
내용의 크기가 자신의 크기가 된다 -->
<strong>진하게</strong>
<u>밑줄</u>
<i>기울임</i>
<a>링크</a>
<span>아이티윌</span>
<textarea cols="10" rows="3"></textarea>
<hr>

 

 

블록 요소의 크기

<div style="background-color: red;">div</div>
<blockquote style="background-color: green;">blockquote</blockquote>
<pre style="background-color: skyblue;">pre</pre>
<h1 style="background-color: gray;">h1</h1>
<ul style="background-color: yellow;">
    <li>java</li>
    <li>python</li>
</ul>

 

inline 요소의 크기

<strong style="background-color: purple;">손흥민</strong>
<span style="background-color: pink;">김연아</span>

<!-- 블럭 요소와 인라인 요소는 css에서 주로 편집한다 -->
<div style="background-color: aqua; width: 250px; height: 200px;"></div>

 

참고

https://www.w3schools.com/html/html_blocks.asp

HTML Block and Inline Elements

 

레이아웃

<body>
    <div id="wrap" style="background-color: red;">#wrap전체블럭
        <div id="header" style="background-color: pink;">#header</div>
        <div id="main" style="background-color: orange;">#main
            <div id="sub" style="background-color: aqua;">#sub</div>
            <div id="content" style="background-color: gold;">#content</div>
        </div> <!-- id=main 끝 -->
        <div id="footer" style="background-color: blue;">#footer</div>
    </div> <!-- id=wrap 끝 -->
</body>

복잡해질수록 주석을 달면 좋다.

<!-- 연습) 동행복권 웹페이지 레이아웃 -->
<!-- 참조 https://dhlottery.co.kr/ -->
<div id="wrap">
    <div id="header">
        <div>
            <span>동행복권</span>
            <input type="button" value="회원가입">
            <input type="button" value="마이페이지">
            <input type="button" value="로그인">
            <input type="button" value="고객센터">
        </div>
        <div>    <!-- 화면에 노출 x -->
            <h1 style="display: none;">대분류</h1>
            <ul style="list-style: none;"> <!-- 리스트 표시 x -->
                <li>복권구매</li>
                <li>복권정보</li>
                <li>당첨결과</li>
                <li>판매점</li>
                <li>이벤트</li>
                <li>행복공감</li>
            </ul>
        </div>
    </div> <!-- header end -->
    <div id="main">
        <div id="sub">
            <h2 style="display: none;">중분류</h2>
            <span>판매점</span><br>
            <ul style="list-style: none;">
                <li>구입처안내</li>
                <li>당첨판매점</li>                     
            </ul>   
        </div><!-- sub end-->
        <div id="content">
            <h3 style="display: none;">소분류</h3>
            <span>로또6/45판매점 조회</span><br>
            <table border="1">
                <tr>
                    <td>         <!-- 내가 따로 추가 -->
                        <strong><span style="color: blue;">지역</span>으로 검색</strong><br>
                        <form>
                            <select id="sido" name="sido">
                                <option>시/도선택</option>
                                <option>경기</option>
                                <option selected>서울</option>
                                <option>부산</option>
                            </select>
                            <select id="gugun" name="gugun">
                                <option>구/군선택</option>
                                <option>종로구</option>
                                <option selected>강남구</option>
                                <option>마포구</option>
                            </select>
                            <input type="button" value="조회">
                        </form>
                    </td>
                    <td>        <!-- 내가 따로 추가 -->
                        <strong><span style="color: blue;">상호/지역(읍/면/동)</span>으로 검색</strong><br>
                        <form>
                            <select id="sangho" name="sangho">
                                <option selected>상호</option>
                                <option>지역(읍/면/동)</option>
                            </select>
                            <input type="text" id="keyword" name="keyword">
                            <input type="button" value="조회">
                        </form>                                
                    </td>
                </tr>
            </table>
            <hr>
            <table border="1">
                <tr>
                    <th>상호명</th>
                    <th>전화번호</th>
                    <th>소재지</th>
                    <th>위치보기</th>
                </tr>
                <tr>
                    <td>도곡행운로또방</td>
                    <td>070-4211-6109</td>
                    <td>서울 강남구 도곡로4길 11 102호</td>
                    <td>
                        <a href=""><img src="../images/search.png"></a>
                    </td>
                </tr>
            </table>
        </div><!-- content end-->
    </div> <!-- main end -->
    <div id="footer"></div> <!-- footer end -->
</div> <!-- wrap end -->

 

참고

https://www.w3schools.com/html/html_layout.asp

HTML Layout Elements and Techniques

https://www.w3schools.com/html/html_layout.asp

HTML Layout Elements and Techniques