April 1~28, 2021 - Front-end(HTML)

#Front-end(HTML)

 

*4월1일~28일

-form tag 및 기타 추가적인 정보 정리

 

1)form tag

-form tag의 모든 종류

 

   <form action="test.php" method="POST">

        <label for="ids">ID : </label>

        <input type="text" name="ids" id="ids"><br>

        <label for="pwd">PW : </label>

        <input type="password" name="pwd" id="pwd"><br>

        <input type="submit" value="로그인">

        <input type="reset" value="초기화">

    </form>

    <hr>

    <form method="POST">

        <label for="ids">ID : </label>

        <input type="text" name="ids" id="ids"><br>

        <label for="pwd">PW : </label>

        <input type="password" name="pwd" id="pwd"><br>

        <input type="submit" value="로그인">

    </form>

    <hr>

 

    <!-- input types~ -->

    <form action="" method="GET">

        Button : <input type="button"><br>

        Checkbox : <input type="checkbox"><br>

        Color : <input type="color"><br>

        Date : <input type="date"><br>

        Date+local time : <input type="datetime-local">

        Email : <input type="email"><br>

        File upload : <input type="file"><br>

        Hidden data 사용자 몰래 작업 : <input type="hidden"><br>

        Image : <input type="image"><br>

        Month : <input type="month"><br>

        Number : <input type="number"><br>

        Password : <input type="password"><br>

        Radio : <input type="radio"><br>

        Range : <input type="range"><br>

        Reset : <input type="reset"><br>

        Search : <input type="search"><br>

        submit : <input type="submit"><br>

        tel : <input type="tel"><br>

        text : <input type="text"><br>

        time : <input type="time"><br>

        url : <input type="url"><br>

        week : <input type="week"><br>

    </form>

 

 

2)기타

-페이지 이동 및 페이지 내 id값으로 이동

 

    <p><a href="https://naver.com">네이~버</a></p>

    <li><a href="#here">here로 이동</a></li>

 

 

3)회원가입 form tag

-form tag 실습용!

실습용으로 따라 만들어본 회원가입창. 혼인여부, 캐릭터선택, 쪽지 수신거부 등이 있는 것으로 보아.. 2000년대 초중반에 사용되던 포맷으로 추정됨.

 

 

  <div class="wrapper">

    <form>

        <div class="header">

            <p class="big">회원가입</p>

            <p class="sm">약관동의 > 실명확인 > 회원가입 > 정보수정</p>

        </div>

 

        <div class="title">

            <p class="left">기본정보 입력</p>

            <p class="right">*표시는 필수항목이므로 반드시 입력해야 합니다.</p>

        </div>

        <hr>

        <table>

            <tr>

                <td class="first">*아이디</td>

                <td class="second">

                    <input type="text" name="id" required>

                    <button type="button">중복검색</button>

                    영문

                </td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">*비밀번호</td>

                <td class="second">

                    <input type="password" name="pw" required>->재확인

                    <input type="password" name="pwCon" required>

                </td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">*비밀번호힌트</td>

                <td class="second"><input type="text" name="pwHint" required>

                    비밀번호 분실 시 참조할 내용</td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">*이름</td>

                <td class="second"><input type="text" name="name" required>->한글</td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">*닉네임</td>

                <td class="second">

                    <input type="text" name="nickname" required>

                    <button type="button">중복검색</button>한글,영문

                </td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">*전자메일주소</td>

                <td class="second"><input type="email" name="email" required size=35></td>

                <td class="third"><input type="checkbox" name="hide" value="비공개">비공개</td>

            </tr>

            <tr>

                <td class="first">*생년월일</td>

                <td class="second">

                    <input type="date" name="date" required>

                    <input type="radio" name="calendar" value="lunar">음력

                    <input type="radio" name="calendar" value="solar" checked>양력

                </td>

                <td class="third"><input type="checkbox" name="hide" value="비공개">비공개</td>

            </tr>

            <tr>

                <td class="first">*성별</td>

                <td class="second">

                    <input type="radio" name="male" value="male">남자

                    <input type="radio" name="female" value="female">여자

                </td>

                <td class="third"><input type="checkbox" name="hide" value="비공개" disabled>비공개</td>

            </tr>

            <tr>

                <td class="first">우편번호</td>

                <td class="second">

                    <input type="text" name="postcode">-<input type="text" name="postcode">

                    <button type="button">찾아보기</button>

                </td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">주소</td>

                <td class="second">

                    <input type="text" name="address" size=35><br>

                    <input type="text" name="address">->나머지주소

                </td>

                <td class="third"><input type="checkbox" name="hide" value="비공개" checked>비공개</td>

            </tr>

            <tr>

                <td class="first">일반전화번호</td>

                <td class="second">

                    <select name="" id="">

                        <optgroup label="국번">

                            <option value="02">02</option>

                            <option value="031">031</option>

                            <option value="051">051</option>

                        </optgroup>

                    </select>

                    -

                    <input type="text" name="">

                    -

                    <input type="text" name="">

                </td>

                <td class="third"><input type="checkbox" name="hide" value="비공개" checked>비공개</td>

            </tr>

            <tr>

                <td class="first">휴대전화번호</td>

                <td class="second">

                    <select name="" id="">

                        <optgroup label="통신사">

                            <option value="02">010</option>

                            <option value="017">017</option>

                            <option value="018">018</option>

                        </optgroup>

                    </select>

                    -

                    <input type="text" name="">

                    -

                    <input type="text" name="">

                </td>

                <td class="third"><input type="checkbox" name="hide" value="비공개" checked>비공개</td>

            </tr>

            <tr>

                <td class="first">홈페이지</td>

                <td class="second"><input type="text" value="http://" size=35></td>

                <td class="third"><input type="checkbox" name="hide" value="비공개">비공개</td>

            </tr>

            <tr>

                <td class="first">소개,인사말</td>

                <td class="second">

                    <textarea rows="3" cols="37" name="">반갑습니다.</textarea>

                </td>

                <td class="third"></td>

            </tr>

        </table>

        <p><Strong>추가정보 입력</Strong></p>

        <hr>

        <table>

            <tr>

                <td class="first h">사진첨부</td>

                <td class="second h">

                    <input type="text"><button type="button">찾아보기</button>

                    <p>200 * 200 픽셀 이하 크기만 허용</p>

                </td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first h">이름표시 아이콘</td>

                <td class="second h">

                    <input type="text"><button type="button">찾아보기</button>

                    <p>25 * 20 픽셀 이하 크기만 허용</p>

                </td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">혼인여부</td>

                <td class="second">

                    <input type="radio" value="미혼" name="marriage">미혼

                    <input type="radio" value="기혼" name="marriage">기혼

                    <input type="radio" value="이혼" name="marriage">이혼

                    <input type="radio" value="교제중" name="marriage">교제중

                </td>

                <td class="third"><input type="checkbox" name="hide" value="비공개">비공개</td>

            </tr>

            <tr>

                <td class="first">관심분야</td>

                <td class="second">

                    <select name="" id="">

                        <option value="">선택없음</option>

                        <option value="게임">게임</option>

                        <option value="운동">운동</option>

                        <option value="연애">연애</option>

                        <option value="결혼">결혼</option>

                    </select>

                </td>

                <td class="third"><input type="checkbox" name="hide" value="비공개">비공개</td>

            </tr>

            <tr>

                <td class="first">캐릭터 선택</td>

                <td class="second"><input type="text" name=""><button type="button">찾아보기</button></td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">메일링 수신거부</td>

                <td class="second"><input type="checkbox" name="">메일링 수신 거부시 체크</td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">쪽지 수신거부</td>

                <td class="second"><input type="checkbox" name="">쪽지 수신 거부시 체크</td>

                <td class="third"></td>

            </tr>

            <tr>

                <td class="first">전체 비공개</td>

                <td class="second"><input type="checkbox" name="">회원등록정보 전체 비공개시 체크</td>

                <td class="third"></td>

            </tr>

        </table>

        <div class="button">

            <button type="submit" style="background-color: orange; border-color:orange">입력완료전송</button>

            <button type="reset" style="background-color: darkgray; border-color:darkgray">다시입력하기</button>

        </div>

    </form>

</div>