티스토리 뷰

HTML+CSS

✔입력양식태그들 / day19 / 25.04.25

one-dy 2025. 4. 25. 15:40

입력양식태그

인터넷을 사용하다보면 사용자의 의견 제시나 중요한 정보를 전달받기 위해 회원가입, 로그인, 검색 등과 같은 다양한 정보를 입력할 수 있다. 이런 공간을 form(폼)이라고 부른다.

 

<form>태그

<form> 블록속성, 일반태그, 사용자의 정보를 입력 받을 수 있는 양식 칸

예) 아이디, 비밀번호를 입력할 수 있는 로그인 창이나 회원가입을 할 수 있는 양식, 검색창 

[기본형]

<form 속성>

 다양한 입력 양식들...

</form>

 

[속성]

1. name= form의 이름을 지정한다. 한 문서 안에 여러 개의 form 태그가 있을 경우 form들을 구분하기 위해서 사용 한다.

2. action= 서버 주소. 서버가 준비되지 않았을 경우 #(임시경로)를 사용한다. 퍼블리셔한테 공유를 안해주는 경우가 많다.

3. method=입력받은 데이터를 서버로 보낼 때 어떤 방식으로 보낼지를 지정한다.

   · "get" : 주소 표시줄에 사용자가 입력한 내용이 그대로 표시되고, 256~4049byte까지의 데이터만 서버로 전송가능. 용량이 작                     기 때문에 전송 속도가 매우 빠르다. (보안에 매우 취약한 방식) *검색어 서치나 광고성 문자 등에 쓰임.

                 ※비트 8개가 1바이트 글자 1개 출력 위해서 8바이트 필요, 한글은 16바이트 필요(자음모음)

   · "post" 대부분의 방식에서 사용하며 사용자의 입력을 표준입력으로 전송하기 때문에 입력내용 길이에 제한을 받지 않는다. 또한

                 사용자가 입력한 내용이 표시되지 않는다. *블로그에 글 길게 쓸 때 

4. target=action속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다. 퍼블리셔가 쓸 일 없다.

...종류 훨씬 더 많다.

<label>태그 

인라인 속성! form요소에 라벨(이름)을 붙이기 위해 사용하는 태그.

label태그를 사용하면 form요소와 label text가 서로 연결되어 있는 것을 브라우저가 인식할 수 있다.

label태그에는 for라는 속성이 필요하다. label for="값"과 input id="값" 명이 일치해야지 브라우저가

'아 이 두개가 세트구나' 인식가능

for 속성은 세트인 input과 연결하여 브라우저에 전달하는 속성으로 class나 id명을 짓듯이 이름을 지어주면 된다. 

 

[기본형]

<form>
1. label태그 안에 입력양식 태그가 들어가는 경우

   <label for="값">
     레이블 텍스트
      <input id="값"/>
   </label>
 <form>
 2. label태그와 입력양식 태그가 나란히 있는 경우

   <label for="값">레이블 텍스트 </label>
   <input id="값" />

반드시 for 속성값과 input태그의 id속성값이 반드시 같아야 한다. 
<body>
  <form action="#" method="post">
    <label for="user_id">아이디</label>
    <input type="text" name="user_id" id="user_id" />
  </form>
</body>

 

<fieldset> <legend>태그 

fieldset : 하나의 form안에서 여러 구역을 나누어 표시할 때 <fieldset>태그를 사용한다.

예로 인터넷 쇼핑몰에서 주문서를 작성할 때 개인정보와 배송정보를 나누어 표시하면

사용자가 입력하기도 편하고 화면도 깔끔하게 정리할 수 있다.

legend태그는 '범위'라는 뜻을 가지고 있고, fieldset태그로 묶은 그룹에 제목을 붙이는 태그이다. 

fieldset 블록속성 legend 인라인속성

 

[기본형]

<fieldset>

  <legend>그룹 이름</legend>

</fieldset>

다양한 input태그 

input type= type속성에 의해서 모양이 결정된다. 기본적으로 inline속성을 갖는다.

웹사이트에서 흔히 볼 수 있는 회원가입창이나 로그인 화면은 폼을 사용해 작성한 것이다.

input태그는 '아이디'나 '패스워드'처럼 사용자로부터 어떠한 내용을 입력받고자 할 때 사용하는 태그이다.

 

[기본형]

<input 속성 />

[input 태그의 속성]

type: input태그의 기능과 모양을 결정할 때 사용하는 속성이다. 기본값은 text이며 textfield라고 한다. 

name: 하나의 form에 여러 개의 input태그가 있을 경우 서로 구분하기 위해 사용한다.

서버로 form이 전달될 때 입력 내용에 대한 제목용도로도 쓰인다. 

id: id선택자 input의 id명을 지을 때 사용하며 label태그의 for속성값과 동일하게 설정하면 브라우저에서 label태그와 한 세트임을 인식할 수 있다. 

 

1) 🔴<input type="text" />

: 한줄짜리  텍스트를 입력할 수 있는 텍스트박스를 넣는다. (기본값) 보통 텍스트 필드라고 부름. 사용자의 이름, 주소, 아이디와 같은 정보를 받을 때 사용. 어떤 속성을 사용하게 되면 글자수를 제한하게 만들 수 있다.

2) 🔴 <input type="password" />

: 비밀번호를 입력할 수 있는 필드 지정. 텍스트필드와 모양은 같지만 텍스트 입력하면  ●특수문자로 글자가 표현됨.

3) <input type="hidden" />

: 화면의 form에서는 보이지 않지만 form을 서버로 전송할 때 함께 전송되는 요소이다.

사용자에게 보여줄 필요는 없지만 관리자가 알아야하는 내용을 저장할 때 사용한다. *프론트엔드의 작업영역;사용자의 고유회원번호, 자동로그인을 몇일동안 허용할건지 등 

4) 🔴<input type="search" />

: 검색 필드를 만들 때 사용. 예전에는 텍스트필드를 많이 사용했지만 html5에서는 field들이 세분화되었다.

검색 키워드를 입력할 경우 키워드를 지울 수 있도록 x아이콘이 함께 나타난다. (자바스크립트 이용해서 모양을 바꿔줄 수 있다.) *검색을 할 수 있는 창이지 실제 검색을 할 수 있는 기능은 없다. 

5) <input type="url" />

: 웹 주소를 입력받을 때 사용. 텍스트 필드와 동일하게 생겼고 사용자가 입력한 내용이 웹 주소가 맞는지 브라우저에서 먼저 검사해준다.

6) 🔴<input type="email" />

: 이메일 주소를 입력하는 이메일 필드. 이메일 필드를 사용하면 폼 양식이 동작했을 때 이메일 양식에 맞게 썼는지 브라우저 자체에서 체크한다.

7) 🔴<input type="tel" />

: 사용자가 입력한 정보를 일반 텍스트가 아닌 전화번호로 인식하여 바로 전화를 걸 수 있도록 한다. 

pc에서는 일반적인 텍스트 필드로 보이지만 모바일 환경에서는 해당 필드에 글자를 입력할 때 숫자 키패드가 나온다.

(자바스크립트로 pc에서는 숫자이외에 안 써지게 만들어줘야한다.)

8) <input type="number" min="숫자" max="숫자" step="숫자" />

: 숫자 생성 양식을 만든다. 보통 쇼핑몰의 제품 수량을 체크할 때 많이 사용한다. min속성은 최솟값을 말하고 max는 최대값을 말한다. 두 속성으로 숫자 범위를 제한할 수 있다. step속성은 증감값을 말하며 step="5"라고 쓰면 5씩 증가하거나 5씩 감소하게 만들 수 있다. Step기본값은 1이다.

9) <input type="range" min="숫자" max="숫자" value="숫자" />

: 숫자로 범위를 지정하는 슬라이드 막대바를 말한다.

value속성은 브라우저가 로드되었을 때 기본적으로 보여주는 '초기값'을 말한다. value속성은 range뿐만 아니라 모든 input type에 다 사용할 수 있다.*설문조사 등에 쓰이나 잘 쓰진 않는다.

10) <input type="radio" name="값" value="값" checked />

: 라디오 버튼은 짧은 항목에 대한 선택이 필요할 때 사용하고, 주로 반드시 한 가지 항목을 선택해야하는 경우 사용한다. radio필드에는 name속성이 꼭 들어가야하며 다른 radio 버튼의 name속성값이 같아야지만 한 개의 그룹으로 인식한다. 하나의 그룹으로 인식되어야지만 여러 항목 중 한 개만 선택할 수 있다. checked속성을 사용하면 사용자의 편의를 돕기 위해 미리 특정 항목을 선택한 상태를 보여준다.  

value속성은 필수 속성으로 라디오 버튼이 선택된 해당 항목을 서버로 넘길 때 같이 전달되는 값이다. 숫자나 문자를 사용할 수 있다.

11) 🔴<input type="checkbox" name="값" value="값" checked />

: 체크박스는 여러 항목을 다중 선택할 때 주로 사용한다. 

라디오 버튼과 마찬가지로 value속성과 name속성이 들어가야하며 name속성은 동일하게 쓰지 않더라도 다중 선택이 가능하다. 하지만 보통 같은 그룹임을 표현하기 위해 동일하게 쓰는 경우가 많다. checked를 이용하여 미리 특정 

항목에 체크표시를 할 수 있다. *회원가입할 때 많이 쓴다.

12) <input type='color' />

: 색상을 선택하는 양식 상자. 선택 시 컬러피커창이 나타나며 색상을 선택할 수 있다. 

(재밌는 기능같은 거 만들 때 이외에는 사용할 일이 없다.)

13) 🔴<input type="date" />   <input type="month" />   <input type="week" />

: date, month, week 모두 날짜를 선택하는 날짜 양식태그이다. date는 생년월일과 같이 년/월/일에 대한 정보를 달력을 통해 선택할 수 있다. month는 월과 연도를, week는 주와 연도를 선택할 수 있다.

14) 🔴<input type="time" />   <input type="datetime" />  <input type="datetime-local" />

: 시간과 날짜를 한 번에 지정할 때 사용한다.  yyyy-mm-dd형태를 사용하고 time은 시간만 지정할 때 사용하고 datetime, datetime-local은 날짜를 함께 지정한다.  datetime-local을 많이 사용하며 현재 지역의 시간을 기준으로 작성할 수 있다. *예약 사이트나 예약 어플에서 주로 사용한다.

15) 🔴<input type="submit" />  <input type="reset" />

: 사용자가 입력폼에 입력한 내용을 서버로 전송할 때 type="submit"을 사용한다. 입력내용을 초기화하고 싶을 때에는 "reset"을 사용한다. 둘 다 버튼 형태로 출력되며 버튼 이름을 바꾸고 싶을 때에는 value속성을 사용한다.

16) <input type="image" src="이미지 경로" alt="설명" />

: 이미지형 버튼을 만들 때 사용한다. 기본 기능은 submit이며 css로 만들기 힘든 형태의 버튼을 이미지로 사용하고 싶다면 type="image"를 사용한다.

17) 🔴 <input type="file" accept="파일형식1, 파일형식2..." multiple />

: 사용자의 컴퓨터에 있는 특정 이미지나 파일들을 첨부할 때 사용한다.

만약 사용자가 첨부할 파일의 확장자를 제한하고 싶다면 accept속성으로 파일을 제한할 수 있고, multiple 속성을 사용하면 파일을 여러 개 첨부할 수 있다.

 <title>입력양식태그</title>
  </head>
  <body>
    <form action="#" method="post">
      <!-- 주문정보 -->
      <fieldset>
        <legend>주문 정보</legend>

        <!-- label태그를 이용해 폼 요소와 연결하기 -->
        <label for="user_id">아이디</label>
        <input type="text" name="user_id" id="user_id" />
      </fieldset>
      <!-- 배송지 -->
      <fieldset>
        <legend>배송지</legend>

        <!-- label태그를 이용해 폼 요소와 연결하기 -->
        <label for="user_id">아이디</label>
        <input type="text" name="user_id" id="user_id" />
      </fieldset>
    </form>
  </body>
</html>
    <form action="#" method="post">
      <!-- text -->
      <div>
        <label for="user_id">아이디</label>
        <input type="text" name="user_id" id="user_id" />
      </div>
      <!-- password -->
      <div>
        <label for="user_pw">패스워드</label>
        <input type="password" name="user_pw" id="user_pw" />
      </div>
      <!-- search -->
      <div>
        <label for="search_word">검색어</label>
        <input type="search" name="search_word" id="search_word" />
      </div>
      <!-- url -->
      <div>
        <label for="url">웹주소</label>
        <input type="url" name="url" id="url" />
      </div>
      <!-- email -->
      <div>
        <label for="user_email">이메일</label>
        <input type="email" name="user_email" id="user_email" />
      </div>
      <!-- tel -->
      <div>
        <label for="phone_num">전화번호</label>
        <input type="tel" name="phone_num" id="phone_num" />
      </div>
      <!-- number -->
      <div>
        <label>숫자</label>
        <input type="number" min="0" max="10" step="2" />
      </div>
      <!-- range -->
      <div>
        <label>범위</label>
        <input type="range" min="0" max="5" value="3" />
      </div>
      <!-- radio -->
      <div>
        <h4>성별</h4>
        <label>
          <input type="radio" name="gender" value="female" />
          여성
        </label>
        <label>
          <input type="radio" name="gender" value="male" />
          남성
        </label>
        <label>
          <input type="radio" name="gender" value="none" checked />
          선택 안함
        </label>
      </div>
      <!-- checkbox -->
      <div>
        <h4>상품선택</h4>
        <label>
          <input type="checkbox" name="giftset" value="1" checked />
          선물용 다과 세트 1
        </label>
        <label>
          <input type="checkbox" name="giftset" value="2" />
          선물용 다과 세트 2
        </label>
        <label>
          <input type="checkbox" name="giftset" value="3" />
          선물용 다과 세트 3
        </label>
      </div>
      <!-- color -->
      <div>
        <label>색상선택</label>
        <input type="color" />
      </div>
      <!-- date -->
      <div>
        <label>날짜선택</label>
        <input type="date" />
        <!-- 일반 텍스트 필드 형태로 현재 시간과 날짜를 입력함. yyyy-mm-dd am/pm 시:분  -->
        <input type="datetime" />
        <!-- 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있음. -->
        <input type="datetime-local" />
        <input type="month" />
        <input type="week" />
        <input type="time" />
      </div>
      <!-- submit, reset -->
      <div>
        <input type="submit" value="가입하기" />
        <input type="reset" value="다시작성" />
      </div>
      <!-- image버튼(전송) -->
      <div>
        <input type="image" src="./css_sprites.png" alt="로그인버튼" />
      </div>
      <!-- file(첨부) -->
      <div>
        <!-- .jpg, .png, .jpeg, .gif, .svg확장자만 첨부 가능 -->
        <input type="file" accept=".jpg, .png, .jpeg, .gif, .svg" />

        <!-- 이미지파일 형식이라면 뭐든 첨부 가능 -->
        <input type="file" accept="image/*" multiple />

        <!-- 엑셀파일, 한글파일, 워드파일 첨부 가능-->
        <input type="file" accept=".xlsx, .xlsm, .hwp, .word" />
      </div>
    </form>
  </body>
</html>

 

더보기
기획+디자인+자바스크립트...+프론트엔드+서버 = 풀스텍회사에 프론트엔드 없으면 퍼블리셔들이 자바스크립트로 기능 만든다.
<title>다양한 입력양식 태그들</title>
    <style>
      select,
      input,
      textarea,
      button {
        /* 포커스 상태일 때 나오는 굵은 선 없애기 */
        outline: none;
      }
      /* 포커스 상태일때 태그 스타일링 */
      :is(select, input, textarea, button):focus {
        border: 1px solid red;
      }

      button {
        border: 1px solid darkcyan;
        /* 버튼 배경 : 투명 */
        background-color: transparent;
      }
    </style>
  </head>
  <body>
   

    <!-- 기본 선택상자 -->
    <select>
      <option value="0">[필수]옵션을 선택해주세요.</option>
      <option value="1" selected>블랙</option>
      <option value="2">아이보리</option>
    </select>
    <br />
    <!-- 다중 선택상자 -->
    <select multiple>
      <option value="0">[필수]옵션을 선택해주세요.</option>
      <option value="1" selected>블랙</option>
      <option value="2">아이보리</option>
    </select>
    <br />
    <!-- 긴 글을 입력하는 textarea -->
    <textarea cols="10" rows="5"></textarea>
    <br />
    <!-- 다양한 버튼 -->
    <button>전송버튼</button>
    <br />
    <button type="reset">취소🙅‍♀️</button>
    <br />
    <button type="button">
      <img src="./css_sprites.png" alt="버튼" />
    </button>
  </body>
</html>

👍 <select>태그

보통 '셀렉트 박스', '선택상자'라고 부르며 여러 데이터 중

하나의 데이터를 선택하거나 다중으로 선택하는 경우 사용한다.

기본 형식은 1개의 데이터만 선택이 가능하지만

multiple속성을 사용하면 다중선택하게 만들 수 있다.(다중선택은 잘 안 씀!)

다중선택방법은 ctrl키를 누른 상태에서 여러 데이터를 선택하면 된다.

selected속성을 넣으면 맨 처음 보여질 옵션을 선택할 수 있다.

 

[기본형]

<select multiple>

  <option selected>데이터1</option>

  <option>데이터2</option> 

  <option>데이터3</option>

</select>

<textarea>태그

블로그나 게시판처럼 긴 글을 입력할 때 사용하는 태그. 

textarea 태그에는 cols, rows, name 속성을 넣을 수 있고

cols속성으로 해당 태그의 넓이를 글자수만큼 지정할 수 있다.

rows속성으로는 해당태그의 높이를 줄 수마큼 지정할 수 있다.

name속성은 다른 폼 요소와 구분하기 위해 사용한다. 

textarea태그의 기본 기능은 pre태그처럼 동작한다. 즉, 줄바꿈이나 공백을 그대로 표현해준다.

그래서 textarea태그를 사용할 경우에는 태그 사이에 공백을 포함한 아무 내용도 넣지 않는다.

*font-family 다시 지정해줘야한다. 기본값은 굴림체이다.

 

[기본형]

<textarea></textarea>

👍👍<button>태그

버튼을 만드는 태그로 3가지 기능을 사용할 수 있다.

기능은 type속성을 통해 지정할 수 있으며 뒤에 닫는 태그가 있는 일반태그로

태그 사이에 이미지를 넣거나 글자를 넣을 수 있어 활용도가 높은 태그이다.

type의 종류로는 submit, reset, button

기본 기능은 전송버튼인 submit.*버튼에 아무것도 지정하지 않으면 submit버튼

*타입이 button일 경우 아무런 기능이 없는 '깡통버튼'(개발자들 사이에서 쓰는 은어같은 것)이 된다. 

이러한 깡통버튼은 자바스크립트를 이용하여 특정기능을 만들 때 많이 사용된다.

 

[기본형]

<button type="기능결정">버튼이름이나 이미지</button>

 

*입력양식의 특징: focus상태일 때 두꺼운 라인이 생기는데 border가 아니고  outline

    <form action="#" method="post">
      <!-- 주문정보 -->
      <fieldset>
        <legend>주문 정보</legend>

        <!-- label태그를 이용해 폼 요소와 연결하기 -->
        <label for="user_id">아이디</label>
        <input type="text" name="user_id" id="user_id" />
      </fieldset>
      <!-- 배송지 -->
      <fieldset>
        <legend>배송지</legend>

        <!-- label태그를 이용해 폼 요소와 연결하기 -->
        <label for="user_id">아이디</label>
        <input type="text" name="user_id" id="user_id" />
      </fieldset>
    </form>
  </body>
<title>다양한 input태그</title>
  </head>
  <body>

    <form action="#" method="post">
      <!-- text -->
      <div>
        <label for="user_id">아이디</label>
        <input type="text" name="user_id" id="user_id" />
      </div>
      <!-- password -->
      <div>
        <label for="user_pw">패스워드</label>
        <input type="password" name="user_pw" id="user_pw" />
      </div>
      <!-- search -->
      <div>
        <label for="search_word">검색어</label>
        <input type="search" name="search_word" id="search_word" />
      </div>
      <!-- url -->
      <div>
        <label for="url">웹주소</label>
        <input type="url" name="url" id="url" />
      </div>
      <!-- email -->
      <div>
        <label for="user_email">이메일</label>
        <input type="email" name="user_email" id="user_email" />
      </div>
      <!-- tel -->
      <div>
        <label for="phone_num">전화번호</label>
        <input type="tel" name="phone_num" id="phone_num" />
      </div>
      <!-- number -->
      <div>
        <label>숫자</label>
        <input type="number" min="0" max="10" step="2" />
      </div>
      <!-- range -->
      <div>
        <label>범위</label>
        <input type="range" min="0" max="5" value="3" />
      </div>
      <!-- radio -->
      <div>
        <h4>성별</h4>
        <label>
          <input type="radio" name="gender" value="female" />
          여성
        </label>
        <label>
          <input type="radio" name="gender" value="male" />
          남성
        </label>
        <label>
          <input type="radio" name="gender" value="none" checked />
          선택 안함
        </label>
      </div>
      <!-- checkbox -->
      <div>
        <h4>상품선택</h4>
        <label>
          <input type="checkbox" name="giftset" value="1" checked />
          선물용 다과 세트 1
        </label>
        <label>
          <input type="checkbox" name="giftset" value="2" />
          선물용 다과 세트 2
        </label>
        <label>
          <input type="checkbox" name="giftset" value="3" />
          선물용 다과 세트 3
        </label>
      </div>
      <!-- color -->
      <div>
        <label>색상선택</label>
        <input type="color" />
      </div>
      <!-- date -->
      <div>
        <label>날짜선택</label>
        <input type="date" />
        <!-- 일반 텍스트 필드 형태로 현재 시간과 날짜를 입력함. yyyy-mm-dd am/pm 시:분  -->
        <input type="datetime" />
        <!-- 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있음. -->
        <input type="datetime-local" />
        <input type="month" />
        <input type="week" />
        <input type="time" />
      </div>
      <!-- submit, reset -->
      <div>
        <input type="submit" value="가입하기" />
        <input type="reset" value="다시작성" />
      </div>
      <!-- image버튼(전송) -->
      <div>
        <input type="image" src="./css_sprites.png" alt="로그인버튼" />
      </div>
      <!-- file(첨부) -->
      <div>
        <!-- .jpg, .png, .jpeg, .gif, .svg확장자만 첨부 가능 -->
        <input type="file" accept=".jpg, .png, .jpeg, .gif, .svg" />

        <!-- 이미지파일 형식이라면 뭐든 첨부 가능 -->
        <input type="file" accept="image/*" multiple />

        <!-- 엑셀파일, 한글파일, 워드파일 첨부 가능-->
        <input type="file" accept=".xlsx, .xlsm, .hwp, .word" />
      </div>
    </form>
  </body> 
 

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

flex속성 / day22 / 25.04.29  (0) 2025.05.02
<form>,<input>태그 공통속성 / day20 / 25.04.28  (1) 2025.04.28
멀티미디어태그 / day16 / 25.04.22  (0) 2025.04.25
스프라이트 / #SplitShire시멘틱구조 / day17 / 25.04.23  (1) 2025.04.25
테이블 태그 칸 합치기 / day18 / 25.04.24  (0) 2025.04.25