티스토리 뷰

HTML+CSS

<form>,<input>태그 공통속성 / day20 / 25.04.28

one-dy 2025. 4. 28. 15:34

👍<form> 태그에 사용하는 공통속성들

1. autocomplete : 자동완성

<form action="#" method="post" autocomplete="on" ></form>

<form action="#" method="post" autocomplete="off" ></form>

값을 on으로 명시하면 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값을 드롭다운해준다. 기본값은 off로 되어있다. 

 

예시)

<form action="#" method="post" autocomplete="on" ></form>

  <input type="text" />

  <input tpye="password" autocomplete="off" />

</form>

2. enctype : form에 사용자가 입력한 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방식을 명시한다. 

·application/x-www-form-urlencoded : 기본값으로 모든 문자들을 서버로 보내기 전에 인코딩됨을 명시한다.

·multipart/form-data : 모든 문자들을 인코딩하지 않음을 명시한다.

이 방식은 form요소가 파일이나 이미지를 서버로 전송할 때 주로 사용한다. 

·text/plain : 공백문자는 '+'기호로 변환하지만 나머지 문자는 인코딩되지 않음을 명시한다.

3. 👍novalidate : form데이터를 서버로 제출할 때 해당 데이터의 유효성 검사를 하지 않음을 명시한다. input 태그에도 쓸 수 있다. 

블로그 게시글 쓸 때, 1:1 문의글 남길 때 등 쓴다. 

*novalidate, autocomplete는 input태그에도 사용하는 공통속성이다.

👍👍👍<input> 태그에 사용하는 공통속성들

1. readonly : 읽기전용 필드임을 명시한다. 사용자가 텍스트를 입력할 수 없고 읽기만 가능한 필드를 지정할 때 사용한다.

readonly의 속성값은 readonly라 속성명 readonly만 써준다.

예시)약관동의 페이지 

2. placeholder : 사용자가 어떤 내용을 입력해야 할지 힌트를 표시할 때 사용한다. 

사용자가 입력을 시작하면 필드를 비워준다.

3. autofocus : 사용자의 편의를 위해 페이지를 불러오자마자 특정 부분에 텍스트 커서가 표시된다. 

4. autocomplete : 해당 폼 요소에 자동완성 기능을 부여한다.

5. maxlength : 텍스트필드에 최대로 입력할 수 있는 문자의 개수를 지정한다.

6. minlength : 텍스트필드에 최소로 입력할 수 있는 문자의 개수를 지정한다. 

7. required : 필수 입력 필드임을 지정한다. (빈 칸이면 서버로 내용이 안 넘어간다.)

8. value : 필드가 가지고 있는 초기값을 지정한다.

실제로 필드에 나타나는 데이터로 placeholder와 다르게 입력필드를 포커싱하더라도 글자가 사라지지 않는다.

서버에 넘겨야하는 값이 있을 때 주로 사용한다. 수량 표시처럼 미리 값을 표시하는 용도로 사용한다.

체크박스나 라디오버튼의 경우 사용자가 어떤 값을 선택했는지에 대한 내용을 서버에 전달할 때에도 사용한다.

9. size : select태그를 쓸 때 화면에 한 번에 표시할 목록의 갯수를 지정한다. 

<title>form에서 사용하는 공통 속성들</title>
  </head>
  <body>
    <h2>폼양식 만들기</h2>
    <form
      action="#"
      method="post"
      autocomplete="on"
      novalidate
      name="join"
      id="join"></form>
    <form
      action="#"
      method="post"
      autocomplete="on"
      novalidate
      id="login"
      name="login"></form>

    <!-- 아이디 -->
    <div>
      <label for="user_id">아이디</label>
      <input type="text" id="user_id" required autofocus />
    </div>
    <!-- 비밀번호 -->
    <div>
      <label for="user_pw">비밀번호</label>
      <input
        type="password"
        id="user_pw"
        name="user_pw"
        required
        autocomplete="off"
        minlength="8"
        maxlength="16" />
    </div>
    <!-- 핸드폰번호 -->
    <div>
      <label for="phone_num">전화번호</label>
      <input
        type="tel"
        name="phone_num"
        id="phone_num"
        placeholder="-은 제외하고 입력해주세요." />
    </div>
    <!-- 이용약관 -->
    <div>
      <h5>이용약관</h5>
      <label for="terms">
        <textarea
          name="terms"
          id="terms"
          rows="3"
          cols="20"
          wrap="soft"
          readonly>
제1조(1항)본 사이트에 회원가입한 사람은 영원히 탈퇴할 수 없다.</textarea
        >
      </label>
    </div>

    <!-- 제출버튼 -->
    <button>가입하기</button>
  </body>
</html>

 

네이버 회원가입 창 만들기 실습 

실명인증된 아이디로 가입 체크박스 밑에 인증요청버튼까지 5단으로 구성한다.

한칸 당 div 그 안쪽에 아이디 div 왼쪽에 스프라이트 이미지로 출력된 아이콘 자리 하나,

입력 input태그 @naver.com은 span태그

눈가리는 아이콘.(실습에선 생략) 안쪽의 모든 구조는 똑같다. 

메일 입력칸은 입력창이 길고 placeholder이다. 

 

<title>네이버:회원가입</title>
    <link rel="stylesheet" href="./css/member.css" />
  </head>
  <body>
    <!-- 전체영역이 container, inner_wrap은 form영역 -->
    <div class="container">
      <div class="inner_wrap">
        <!-- h1로고 영역과 form 태그 2단으로 크게 나눈다. -->
        <header>
          <h1>
            <a href="https://www.naver.com">로고</a>
          </h1>
        </header>
<!-- form태그에 id와 class를 같이 지정하는 경우가 많은데 class이름은 css꾸밀 때 쓰이고, id명은 자바스크립트에서 태그, 내용 불러올 때 쓴다. -->
        <section class="inner_con">
          <!-- 실명인증 -->
          <div class="text_top">
            <span>실명 인증된 아이디로 가입하기</span>
          </div>

          <form
            action="#"
            method="post"
            id="member_form"
            class="member"
            autocomplete="on">
            <!-- 아이디+비번+이메일 -->
            <div class="user_list">
              <!-- 아이디 -->
              <div class="user_info">
                <label for="user_id" class="user_icon1">
                  <input
                    type="text"
                    name="user_id"
                    id="user_id"
                    placeholder="아이디"
                    required />
                  <span>@naver.com</span>
                </label>
              </div>
              <!-- 비밀번호 -->
              <div class="user_info">
                <label for="user_pw" class="user_icon2">
                  <input
                    type="password"
                    name="user_pw"
                    id="user_pw"
                    placeholder="비밀번호"
                    required />
                </label>
              </div>
              <!-- 이메일주소 -->
              <div class="user_info">
                <label for="user_mail" class="user_icon3">
                  <input
                    type="email"
                    name="user_mail"
                    id="user_mail"
                    placeholder="[선택]이메일주소(비밀번호 찾기 등 본인 확인용)" />
                </label>
              </div>
            </div>
            <!-- 이름+생년월일+통신사+성별 -->
            <div class="user_list">
              <!-- 이름 -->
              <div class="user_info">
                <label for="user_name" class="user_icon1">
                  <input
                    type="text"
                    name="user_name"
                    id="user_name"
                    placeholder="이름"
                    required />
                </label>
              </div>
              <!-- 생년월일 -->
              <div class="user_info">
                <label for="birth" class="user_icon4">
                  <input
                    type="datetime"
                    name="birth"
                    id="birth"
                    placeholder="생년월일 8자리"
                    required />
                </label>
              </div>

              <!-- 통신사 선택 -->
              <div class="user_info">
                <label for="agency" class="user_icon5">
                  <select name="agency" id="agency" required>
                    <option>통신사 선택</option>
                    <option>SKT</option>
                    <option>KT</option>
                    <option>LG U+</option>
                    <option>SKT 알뜰폰</option>
                    <option>KT 알뜰폰</option>
                    <option>LG U+ 알뜰폰</option>
                  </select>
                </label>
              </div>
              <div class="user_info info_btn">
                <!-- 성별  -->
                <div class="btn_group">
                  <label for="gender">
                    <button type="button" value="male">남자</button>
                    <button type="button" value="female">여자</button>
                  </label>
                </div>

                <!-- 국적 -->
                <div class="btn_group">
                  <label for="foreigner">
                    <button type="button" value="0">내국인</button>
                    <button type="button" value="1">외국인</button>
                  </label>
                </div>
              </div>
            </div>

            <!-- 휴대전화번호 -->
            <div class="user_list">
              <div class="user_info">
                <label for="phone" class="user_icon6">
                  <input
                    type="tel"
                    name="phone"
                    id="phone"
                    placeholder="휴대전화번호"
                    required
                    maxlength="11" />
                </label>
              </div>
            </div>

            <!-- 인증약관 -->
            <div class="user_list">
              <div class="user_info">
                <label for="user_check" class="user_icon7">
                  <input
                    type="checkbox"
                    name="user_check"
                    id="user_check"
                    required />
                  <span class="green">[필수]</span>
                  <strong>인증 약관 전체동의</strong>
                </label>
              </div>
            </div>

            <!-- 인증요청 버튼 -->
            <button class="submit_btn" type="submit">인증요청</button>
          </form>
        </section>
      </div>
    </div>
  </body>
</html>
@charset "utf-8";

/* 초기화 */

a {
  text-decoration: none;
}

.container {
  width: 100%;
  height: 100vh; /* 브라우저 크기가 줄여도 인증요청은 맨 아래 보인다. 보이는 만큼의 영역의 최대 */
  overflow: hidden;
}

.inner_wrap {
  width: 500px;
  height: 100%;
  margin: 0 auto;
  padding: 16px 20px;
  /* width 500인데 padding20씩 주면 넓이가 540px이 되므로 총 컨테이너 넓이는 500으로 맞춰야되기 때문에 box-sizing:border-box 해줘야한다! */
  box-sizing: border-box;
  overflow: hidden;
}

header {
  width: 100%; /* 패딩뺀 460px이 된다. */
  height: 50px;
  box-sizing: border-box;
  padding-bottom: 16px;
}

h1 {
  /* 스프라이트 이미지의 넓이 높이만큼 스프라이트 이미지에서 뚫어놔야한다. */
  width: 94px;
  height: 18px;
}

h1 > a {
  display: block; /* a태그는 인라인이므로 블록으로 바꿔준다. */
  width: 100%;
  height: 100%;
  font-size: 0; /* 글자는 안보여야하므로 */
  background: url(../img/sprite.png) no-repeat;
  background-size: 372px 326px;
  background-position: 0 -244px;
}

/* 컨텐츠영역 */
.inner_con {
  width: 100%;
  height: 94%;
  background-color: rgb(255, 255, 255);
}

.text_top {
  width: 100%;
  height: 20px;
  font-size: 13px;
  color: #888;
  line-height: 20px;
  letter-spacing: -0.02rem;
  margin-bottom: 16px;
}
.text_top span {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.text_top span::after {
  content: "체크박스";
  font-size: 0;
  display: block; /* 가로로 나올 수 있게 */
  width: 20px;
  height: 20px;
  background: url(../img/sprite.png) no-repeat;
  background-size: 372px 326px;
  background-position: -342px -269px;
}
/* 폼양식 공통속성 */
input {
  outline: none;
  width: 90%;
  border: none;
  font-size: 16px;
}
/* 폼태그 */
.member {
  width: 100%;
  height: 100%;
  position: relative; /* 상대위치 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 큰 폼 단락 1개 공통속성 */
.user_list {
  width: 100%;
  height: fit-content;
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  box-sizing: border-box; /* border가 들어가면 box-sizing해줘야한다. border영역이 width밖에 생기기 때문에 안쪽으로 밀어넣어줘야한다. */
}
/* 큰 폼 단락 안의 양식 1개당 공통속성*/
.user_info {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #c6c6c6;
  box-sizing: border-box;
  padding: 13px 10px 11px 40px;
  position: relative; /* 상대위치 */
}
.user_info:last-child {
  border-bottom: 0;
}
.user_info label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.user_info #user_id {
  width: 77%;
  height: 100%;
}
.user_info #user_id + span {
  font-size: 15px;
  color: #777;
}
/* 항목 아이콘 공통속성 */
label::before {
  width: 30px;
  height: 30px;
  content: "icon";
  font-size: 0;
  position: absolute; /* 절대위치 */
  left: 5px;
  display: inline-block;
  background: url(../img/sprite.png) no-repeat;
  background-size: 372px 326px;
}
.user_icon1::before {
  content: "아이디";
  background-position: -342px -64px;
}
.user_icon2::before {
  content: "비밀번호";
  background-position: -310px 0;
}
.user_icon3::before {
  content: "이메일주소";
  background-position: -96px -296px;
}
.user_icon4::before {
  content: "생년월일";
  background-position: -192px -296px;
}
.user_icon5::before {
  content: "통신사";
  background-position: -224px -296px;
}
.user_icon6::before {
  content: "전화번호";
  background-position: -310px -128px;
}
.user_icon7::before {
  content: "인증약관";
  width: 22px;
  height: 22px;
  left: 10px;
  background-position: -342px -199px;
}
/* 통신사 선택 */
.user_info select {
  width: 98%;
  height: 100%;
  outline: none;
  font-size: 16px;
  color: #888;
  border: none;
}
/* 성별/국적 */
.user_info.info_btn {
  /* 하나의 태그에 이름을 여러 개 지었을 때 띄어쓰기 없이 이렇게 쓴다.class명이 user info이면서 info btn인 요소를 찾아라! 라는 뜻이다.  */
  height: fit-content;
  padding-left: 10px;
  display: flex;
  gap: 20px;
}
.btn_group {
  width: 50%;
  box-sizing: border-box;
}
.btn_group button {
  width: 50%;
  background-color: transparent;
  border: none;
  box-sizing: border-box;
  padding: 5px 0;
  color: #777;
  cursor: pointer;
}
.btn_group button:first-child {
  border: 1px solid #c6c6c6;
  border-radius: 4px 0 0 4px;
  border-right: 0;
}
/* 버튼 클릭하면 가운데 선이 생기는 건 java script로 해줘야한다. */
.btn_group button:last-child {
  border: 1px solid #c6c6c6;
  border-radius: 0 4px 4px 0;
}
.btn_group button:first-child:hover {
  color: #03c75a;
  border: 1px solid #03c75a;
  border-right: 0;
}
.btn_group button:last-child:hover {
  color: #03c75a;
  border: 1px solid #03c75a;
}
.btn_group button:first-child:hover + button {
  border-left: 1px solid #03c75a;
}
/* 인증약관 전체동의 */
input[type="checkbox"] {
  width: 0;
  height: 0;
  overflow: hidden;
}
.green {
  color: #03c75a;
  font-size: 14px;
}
.green + strong {
  font-size: 15px;
  font-weight: bold;
  line-height: 26px;
  display: inline-block;
  margin-left: 5px;
}

/* 인증요청버튼 */
.submit_btn {
  background-color: #09aa5c;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  width: 100%;
  height: 50px;
  cursor: pointer;
  margin-top: auto;
  margin-bottom: 36px;
}

'HTML+CSS' 카테고리의 다른 글

position / 좌표 / z-index속성 / day23 / 25.05.01  (0) 2025.05.02
flex속성 / day22 / 25.04.29  (0) 2025.05.02
✔입력양식태그들 / day19 / 25.04.25  (3) 2025.04.25
멀티미디어태그 / day16 / 25.04.22  (0) 2025.04.25
스프라이트 / #SplitShire시멘틱구조 / day17 / 25.04.23  (1) 2025.04.25