[2021/12/13]국비지원-HTML5 코딩툴 기본학습 5-(1), (2) 로그인 양식, 검색 양식

공통어
<form>
        <fieldset>
                <legend>
                        <label>
<input>
</fieldset>
<form>

이 거를 국비 강사는 로그인 양식, 회원가입 양식 작성할 때 ul / ol 이용하는 방법으로 가르쳐줬다.

근데 나는 좀... 음.
작성할 땐 편하긴 한데 사실 스타일이 따아아아아악히 맘에 안 든다.
구현 해 보면 그 순차딱지(가운데 왕점) 붙거나 1. 2. 3. 순번 붙어 있어서...

굳이 이래야 하나 싶은 느낌이 약간 좀..?ㅎㅋ;;

(1) Log in 양식

<!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>form    - 로그인</title>
</head>
<body>
<h1><a href="#">NAVER</a></h1>
<fORM action="/" method="post">
    <fieldset>
        <legend>로그인</legend>
        <ol>
            <li>
                <label>아이디</label>
                <input type="text" id="userID" autofocus required placeholder="아이디를 입력하세요">
            </li>
            <li>
                <label>비밀번호</label>
                <input type="text" id="userPW" autofocus required placeholder="비밀번호를 입력하세요">
            </li>
            <li>
                <input type="submit" value="로그인">
            </li>
        </ol>
        <ul>
            <li><a href="#">아이디 찾기</a></li>
            <li><a href="#">비밀번호 찾기</a></li>
            <li><a href="#">회원가입</a></li>
        </ul>
    </fieldset>
</fORM>
</body>
</html>

(2) 검색 박스 양식 : img 응용

<!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>form_2   -검색</title>
</head>
<body>
    <form action="/" method="post">
        <fieldset>
            <legend>자료검색영역</legend>
            <label for="search">자료검색</label>
            <input type="search" id="srch">
            <input type="image" src="images/btn_search.gif" alt="검색">
        </fieldset>
    </form>
</body>
</html>

저작자표시 비영리 변경금지

티스토리툴바