본문 바로가기
프론트엔드 개발자/CSS

HTML CSS FORM 태그 정리 + code

by 신디블로그 2023. 3. 22.
SMALL

//양식(form)
//표(table)
// tab contents, slide cont


//양식(form)
브라우저 ->  사용자데이터를 받기위한 사용자데이터 ---> 서버
    화면에 표시하는 요소


모양 -> 디자인 -- 퍼블리셔
 --------------- 데이터 처리 (개발자)


 폼태그 기본구조

 <form>
    <fieldset>  
        <lehend></legend> 
        양식요소 작성위치
    </fieldset>
 </form>


//폼요소
데이터를 입력받는 형식에 따라서


input :글씨 입력, 파일, radio, chekbox , 기타 등등

    <input> -> 인라인
    스스로 컨텐츠를 표현 -w,h 적용

    type 속성을 이용하여 인풋의 성격을 결정

    type='text'
    type='password'
    type='radio'
    type='chekbox'


button :클릭하는 요소

    <button>버튼이름</button>

    type="button" : 기본값
    type="submit" 
    type="reset"


select : 선택메뉴 (우편번호 , 생년월일)

    <select>
        <option>목록</option>
    </select>
textarea : 글상자 (게시판 글쓰기)
    <textarea></textarea>

글자입력 대기상태 .box input:focus

///테두리
1.border : 레이아웃에 영향을 줌
2.outline : 레이아웃에 영향을 주지않음
    outline:보더와동일


*****양식요소 마크업 하기

form 
    fieldset
        legend
            폼요소 작성

1) 버튼요소만 생성하는 경우
form -> 생략해두됨
    button -> 단독작성가능

2) 입력요소(글자,라디오,체크박스)을 받아서 서버에 전송하는 패턴
form -> 작성해야함..

3)fieldset > legend
    폼요소를 그룹핑할때 사용함.
    -> 사용을 권장.
    -> 생략은 가능

    논리적인 요소 --> 웹접근성을 위한 마크업

    폼 안에 들어있는 요소에 대한 명시적인 타이틀

//////////////////////
1.웹표준 : 시멘틱 마크업 (논리적인 마크업)
2.웹접근성 : 모든사람, 모든장치에 웹페이지를 볼 수 있게 만들기

    장애인 , 비장애인 -> 웹사이트를 똑같이 이용가능해야함

    시각장애인 ---> 스크린리더 (시멘틱마크업을 이용하여 읽어줌)


fieldset  legend 디자인 하지않음
from 디자인 하지않음

form => 폼을 감싸는 박스를 div로 생성

div
    form
        fieldset    
            legend


//////form요소 작성시
-버튼, 글상자요소를 제외하고 나머지요소들은 타이틀 잘성을 권장


<input> + 제목 --> label 태그로 작성
라벨태그는 폼의 전후 상관없음
라벨태그는 접근성요소 (스타일시 화면에서 숨김)
라벨과 폼요소를 서로 연결 (제목 + 내용으로 링크해야됨)
폼요소에는 id속성을 작성하고
라벨 for를 작성



<label for="아이디입력상자">제목</label>
<input id="아이디입력상자">

<input>
<label>제목</label>


폼태그 작성시 순서

1.아이디
2.비번
3.로그인 유지 및 보안
4.로그인버튼
5.찾기/회원가입

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>

        body {
            padding: 50px;
        }

        .box {
            background-color: #ccc;

        }

        .box1 input {
            width: 100px;
            height: 100px;
            border: 10px solid #f00;
            background-color: chartreuse;
            font-size: 50px;
            transition: width 0.3s ease-in-out;
        }

        .box1 input:focus {
            background-color: #f00;
            outline: 0 none;
            width: 500px;
        }

        .box2 input {
            width: 100px;
            height: 100px;
        }

        .box3 input {
            width: 100px;
            height: 100px;
        }

        .box4 input {
            display: inline-block;
        }

        .box5 input {
            display: block;
        }

        .box6 {
            display: flex;
        }
        .daum {
            width: 270px;
            height: 94px;
            background-color: #ccc;
            border: 1px solid #444;
            padding: 12px 14px;
        }

        .daum .tit {
            font-size: 13px;
            line-height: 1;
            letter-spacing: -1px;
            font-weight: 400;
            background-color: #fc0;
            margin-bottom: 13px;
        }

        .log-btn{
            width: 270px;
            height: 42px;
            background-color: #fc0;
            border: 0 none;
            font-size: 13px;
            cursor: pointer; /*커서모양 포인트*/
            margin-bottom: 10px;
        }
        .daum .menu {
            display: flex;
            justify-content: space-between;
           

        }

        .daum .menu li a {
            font-size: 13px;
            background-color: #fc0;
            display: block;
            line-height: 16px;
        }

        .naver {
            width: 310px;
            height: 135px;
            background-color: #ccc;
            padding: 20px 20px 13px 20px;
           
        }

        .naver .ntlt {
            font-size: 13px;
            color: #808080;
            font-weight: 400;
            letter-spacing: -1px;
        }

        .naver .naver-btn {
            margin-top: 14px;
            width: 315px;
            height: 48px;
            background-color: #19ce60;
            border: 0 none;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .naver .nmenu {
            display: flex;
            gap: 16px;
            margin-top: 18px;
        }

        .naver .nmenu li {
            flex: none;
            position: relative;
        }

        .naver .nmenu li:first-child::before {
            content: '';
            width: 6px;
            height: 6px;
            position: absolute;
            right: -10px; top: 50%;
            margin-top: -3px;
            background-color: #444;
            border-radius: 3px;

        }

        .naver .nmenu li:last-child {
            margin-left: auto;
        }
        .naver .nmenu li a {
            font-size: 11px;
            color: #444;
        }

        .test {
            background: #fc0;
            display: flex;
        }

        .test li {
            border: 1px solid #f00;
        }

        .test li:first-child {
            margin-right: 20px;
            position: relative;
        }

        .test li:first-child::before {
            content: '';
            width: 10px;
            height: 10px;
            background-color: #f00;
            border-radius: 5px;
            position: absolute;
            right: -15px; top: 50%;
            margin-top: -5px;

        }

        /* .test li:nth-child(2) {
            margin-left: auto;
        } */

        .test li:last-child {
            margin-left: auto; /*자동으로 오른쪽으로감*/
        }

        .nate {
            background-color: #fc0;
        }

        .nate fieldset {
            /* 기본값이 테두리표현 */
            /* 테두리만 제거 */
            border: 0 none;
        }

        .nate fieldset legend {
            /* 접급성을 위한 타이틀 요소 */
            /* 화면에서 숨김처리 */
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip-path: polygon(0 0,0 0,0 0);
        }

        .nate1 {
            width: 292px;
            border: 1px solid #444;
            padding: 0 19px;
        }

        .nate1 fieldset {
            border: 0 none;
        }

        .nate1 .innerbox {
            height: 118px;
            background-color: #fc0;
            position: relative;
        }

        .nate1 .innerbox .user-id {
            width: 217px;
            height: 25px;
            border: 1px solid #aaa;
            position: absolute;
            left: 0; top: 33px;
        }

        .nate1 .innerbox .user-pwd {
            width: 217px;
            height: 24px;          
            border: 1px solid #aaa;
            position: absolute;
            left: 0; top: 59px;
        }
        .nate1 .innerbox .log-btn {
            width: 74px;
            height: 52px;
            border: 1px solid #aaa;
            position: absolute;
            /* 버튼은 w,h에 보더값이 계산되어 적용 */
            right: 0; top:33px;
        }

        .nate1 .innerbox input:focus {
            outline: 0 none;
        }

        .nate1 .innerbox .opt {
            display: flex;
            position: absolute;
            left: 0; top: 0;
        }

        .nate1 .innerbox .opt1 {
            display: flex;
            position: absolute;
            left: 0; bottom: 0;
            gap: 3px;
            align-items: center;
        }

        .nate1 .innerbox .opt1 li{
            flex: none;
        }

        .nate1 .innerbox .opt1 li a{
            font-size: 14px;
            line-height: 30px;
        }

        .nate1 .innerbox .opt1 li:first-child a::after {
            content: '/';
            margin-left: 3px;
        }

        .nate1 .innerbox .opt1 li:nth-child(2) a::after {
            content: '|';
            margin-left: 3px;
        }


       




    </style>
</head>

<body>
    <div class="box">
        <input type="text" name="" id="">
    </div>
    <div class="spacer"></div>
    <div class="box box1">
        <input type="text" name="" id="">
    </div>
    <div class="spacer"></div>
    <div class="box box2">
        <input type="radio" name="" id="">
    </div>
    <div class="spacer"></div>
    <div class="box box3">
        <input type="checkbox" name="" id="">
    </div>
    <div class="spacer"></div>
    <div class="box box4">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
    <div class="spacer"></div>
    <div class="box box5">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
    <div class="spacer"></div>
    <div class="box box6">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
    <div class="spacer"></div>
    <div class="daum">
        <h3 class="tit">이제 카카오계정으로 Daum을 이용해주세요.</h3>
        <button class="log-btn">카카오계정으로 로그인</button>
        <ul class="menu">
            <li><a href="">다음아이디 통합하기</a></li>
            <li><a href="">회원가입</a></li>
        </ul>
    </div>
    <div class="spacer"></div>
    <div class="naver">
        <h3 class="ntlt">네이버를 더 안전하고 편리하게 이용하세요</h3>
        <button class="naver-btn">NAVER 로그인</button>
        <ul class="nmenu">
            <li><a href="">아이디</a></li>
            <li><a href="">비밀번호찾기</a></li>
            <li><a href="">회원가입</a></li>
        </ul>
    </div>
    <div class="spacer"></div>
    <ul class="test">
        <li><a href="">link1</a></li>
        <li><a href="">link2</a></li>
        <li><a href="">link3</a></li>
    </ul>
    <div class="spacer"></div>
    <!-- 네이트 로그인 -->
    <form action="" class="nate">
        <fieldset>
            <legend>필드셋 이름표</legend>
        </fieldset>
    </form>
    <div class="spacer"></div>
    <div class="nate1">
        <form action="">
            <fieldset>
                <legend class="hide">회원 로그인</legend>
                <div class="innerbox">
                    <label for="user-id" class="hide">회원 아이디</label>
                    <input type="text" name="" id="user-id" class="user-id">
                    <label for="user-pw" class="hide">회원 비밀번호</label>
                    <input type="password" name="" id="user-pwd" class="user-pwd">
                    <ul class="opt">
                        <li>
                            <input type="checkbox" name="" id="log-on">
                            <label for="log-on">로그인 유지</label>
                        </li>
                        <li>
                            <a href="#">IP보안<span>on</span></a>
                        </li>
                    </ul>
                    <button class="log-btn">로그인</button>
                    <ul class="opt1">
                        <li><a href="">아이디</a></li>
                        <li><a href="">비밀번호찾기</a></li>
                        <li><a href="">회원가입</a></li>
                    </ul>
                </div>
            </fieldset>
        </form>
    </div>

</body>
</html>

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

'프론트엔드 개발자 > CSS' 카테고리의 다른 글

table 클론코딩 + code  (0) 2023.03.24
form 태그와 table태그 공부하기  (0) 2023.03.24
html css form요소 파악하기  (0) 2023.03.22
html css 리스트 메뉴menu 만들기 클론코딩 3 +code  (0) 2023.03.21
html css 가시성제어, 마우스이벤트, not() 부정선택자,background  (0) 2023.03.21

관련글

댓글

티스토리툴바