입력 양식

입력 양식 태그

 

사이트를 이용하는 사람이 정보를 입력하면 이 정보를 프론트엔드 분야 쪽으로 토스(넘겨주기) 위한 태그

• <form> 태그
  - ul태그와 비슷한 개념
  - 입력양식태그들을 작성하기 전 기본적으로 작성해주는 태그
  

  <form [속성="속성값"]>여러 폼 요소</form>​

  - 속성
    ⅰ) method
         : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정
          (사용할 수 있는 속성 값은 get과 post입니다.)
    ⅱ) name
         : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정 
    ⅲ) action
         : <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정
    ⅳ) target
         : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다.
  

  // 입력한 폼을 서버로 보내기
  <form action="register.php">
  /* 여러 폼 요소 */
  </form>​

  - autocomplete 속성
    : 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것
      (매우 중요한 개인 정보나 인정 번호와 같은 일회성 정보를 입력한다면 이 기능은 사용하지 말 것!!!)
  

  <form action="" autocomplete="off"> 
  /* 여러 폼 요소 */
  </form>​

• <fieldset>, <legend> 태그
  - <fieldset> 태그
     : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
  

  <fieldset [속성="속성값"]> </fieldset>​

  - <legend> 태그
     : <fieldset> 태그로 묶은 그룹에 제목을 붙일 때 사용
  

  <fieldset>
  	<legend>그룹 이름</legend>
  </fieldset>​

• input type
  - 태그이기 때문에 css속성에서 형태를 바꿔줄 수 있다.
  - display:inline-block 형태이다.
  - input type 태그의 경우 클릭을 하면 검은색 테두리가 적용이 되는 기본적인 특징이 있는데 이것을 초기화시켜주기 위해 css에서 input{outline:none} 사용해준다.
  - input 태그를 클릭했을 때 안에 있는 css속성이 적용되도록 만들어주는 css구문
  - type 속성 (<input type="">)
    1. text
       : 글자를 입력받을 수 있는 가로 박스를 만들어주는 속성
        - 주요 속성
          ⅰ) size
               : 필드의 길이를 지정
          ⅱ) value
               : 텍스트 필드 부분에 보여 주는 내용
                 (사용하지 않으면 빈 텍스트 필드가 표시)
          ⅲ) maxlength
               : 최대 문자 수를 지정
  
    2. password
       : 글자를 입력할 경우 특수문자로 표기가 되는 박스를 만들어주는 속성
         (웹사이트 상에서 비밀번호와 같이 중요한 개인정보를 입력받을 때 사용을 하는 속성)
        - 주요 속성
          ⅰ) size
               : 필드의 길이를 지정
          ⅱ) maxlength
               : 최대 문자 수를 지정
     
      ★ <input type="?" placeholder="원하는 내용"> ★
          : 내용을 입력받기 전 평소에 보이는 텍스트
  
    3. search
       : 검색창을 만들어주는 input 태그로 오른쪽 부분에 x표시가 생기는 특징이 있다.
  
    4. url
       : 웹사이트 상에서 웹사이트 주소를 입력받는 전용 공간을 만들어주는 속성
  
    5. email
       : 웹사이트 상에서 메일 주소를 입력받는 전용공간을 만들어주는 속성
  
    6. tel
       : pc에서 해당 영역을 클릭했을 때는 아무런 효과가 없지만 스마트폰에서 해당 영역을 클릭해주면 숫자패드로 바뀐다. (숫자를 입력받는 공간)
  
    7. number
       : 원하는 값을 범위를 지정해두고 입력받을 수 있는 공간을 만들어주는 속성
  

  <input type = "number" min="1" max="100" step="3">​

  - min
    : 최솟값
  - max
    : 최댓값
  - step
    : 한 번 클릭에 변동되는 값
  - value
    : 필드에 표시할 초깃값
  
    8. range
       : 막대 바가 생성되며 이 막대 바를 움직여서 number처럼 범위 내에서 값을 입력받을 때 사용하는 태그
  

  <input type="range" min="1" max="20" value="1">​

  
    9. radio
       : 체크를 할 수 있는 동그라미가 생기며 name과 반드시 함께 사용한다.
        (동그라미 체크해서 정보를 입력받는 방식)
        - 항목을 1개만 선택 가능
        - 속성
          ⅰ) value
               : 선택한 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정
                 (이 값은 영문이거나 숫자여야 하며 필수 속성이다.)
          ⅱ) checked
               : 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다.
  

  <input type="radio" name="원하는 이름">​

  - name이 같은 경우 하나의 그룹으로 인식해서 클릭을 할 때마다 다른 체크되어 있는 내용이 해제된다.
  - name부분 이름이 서로 다른 경우 중복체크가 가능해진다.
    (웹사이트 상에서 설문조사와 같이 한 가지만 체크를 해야 하는 내용 작성 시 자주 사용하는 태그)
  

  <input type="radio" name="?" checked>​

  - 태그에 checked라는 구문을 작성해주면 사이트를 처음 열었을 때 체크가 된 상태로 출력된다.
  
    10. checkbox ★★★
         : 웹사이트 상에서 내용을 동의하거나 기타 여러 가지 내용을 체크를 해야 할 때 사용하는 체크 태그
           (중복체크가 가능한 것을 기본값으로 두고 있다)
           - 2개 이상 선택하는 경우
          - 속성
          ⅰ) value
               : 선택한 체크 박스를 서버에게 알려 줄 때 넘겨줄 값을 지정
                 (이 값은 영문이거나 숫자여야 하며 필수 속성이다.)
          ⅱ) checked
               : 체크 박스의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다.
  
    11. color
         : 웹사이트 상에서 색상값을 입력받을 때 사용하는 태그
          (원하는 색상을 선택해서 hex코드 / rgb코드 / hsl코드로 값을 찾아줄 수 있다.)
          cf) 스포이드 모양에 버튼을 눌러주면 현재 웹사이트 내에서 원하는 색상을 선택해서 그 색상값을 바로 확인할 수 있다.
  
    12. date
         - <input type="month">
           : 연과 월을 표시해주는 날짜 입력방식
         - <input type="week">
           : 연과 주를 표시해주는 날짜 입력방식
          - <input type="date">
           : 연/월/일을 표시해주는 날짜 입력방식
             (지정날짜를 선택해야 할 때)
    13. datetime-local / datetime
         : 연도 / 월 / 일 / 오후, 오전 시:분
  
    14. time
         : 시간을 입력받을 때 사용하는 태그
  
    15. file
         : 파일을 업로드해줄 수 있는 양식을 만들어주는 태그
          (실제로 버튼을 클릭해서 원하는 파일을 선택해서 업로드해줄 수 있다)
  
     16. submit 
          : 폼에 입력한 정보를 서보로 전송
            (전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.)
            - value속성을 사용해서 버튼에 표시할 내용을 지정한다.
  
     17. reset
          : <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지운다.
            - value속성을 사용해서 버튼에 표시할 내용을 지정한다.
  
     18. image
          : submit 버튼과 같은 기능을 하는 이미지 버튼을 나타낸다.
  

  <input type="image" src="이미지 경로" alt="대체 텍스트">​

  
     19. button
          : 오직 버튼 형태만 삽입한다.
            (주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용한다.)
            - value 속성을 사용해 버튼에 표시할 내용을 지정한다.
  

  <input type="button" value="버튼에 표시할 내용">​​

  
     20. hidden
           : 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소이다.
  

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>입력양식태그#1</title>
      <style>
          *{margin:0;padding:0;}
          input{outline:none;}
          /*input{width:400px;height:100px;
                  border:2px solid red;
                  background-color:blue;
                  text-align:center;
                  font-size:35px;
                  color:white;}*/
          
         /* input{width:300px;height:30px;
                  font-size:25px;
                  display:block;
                  margin:20px auto;}*/
          
          input{width:300px;height:30px;
                  font-size:25px;
                  margin:40px;}
          
          /*input:focus{background-color:yellow;color:#123456;font-weight:bold;}*/
          
          .a:focus{border:2px solid blue;}
      </style>
  </head>
  <body>
      <form>
          <!--<input type="text" placeholder="아이디">
          <input type="password" placeholder="비밀번호">-->
          <input type="search" placeholder="검색어를 입력해주세요">
          <input type="text" class="a">
          
      </form>
  </body>
  </html>

  
  

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>입력양식태그#2</title>
      <style>
          input{width:300px;height:30px;
                  }
      </style>
  </head>
  <body>
      <form>
          <!--<input type="url" placeholder="본인확인용 이메일 주소를 적어주세요">-->
          <!--<input type="email">-->
          <!--<input type="tel">-->
          <!--<input type="number" min="1" max="100" step="5">-->
          <input type="range" min="1" max="30" value="1">
      </form>
  </body>
  </html>

  
  

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>입력양식태그#3</title>
      <style>
      
      </style>
  </head>
  <body>
      <form>
          <p>취미생활이 무엇인가요?</p>
          <input type="radio" name="?">탁구
          <input type="radio" name="?">농구
          <input type="radio" name="?">배구
          <input type="radio" name="?">축구
      </form>
  </body>
  </html>​

  
  

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset=utf-8>
      <title>입력양식태그 #4</title>
  </head>
  <body>
      <form>
          <!--<input type="radio" name="a">옵션1
          <input type="radio" name="a">옵션2
          <input type="radio" name="a" checked>옵션3
          <input type="radio" name="a">옵션4-->
          
          <p>본인이 관심있는 분야는?(중복체크가능)</p>
          <input type="checkbox">예술
          <input type="checkbox">스포츠
          <input type="checkbox">요리
          <input type="checkbox">예능
      </form>
  </body>
  </html>​

  
  

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>입력양식태그#5</title>
      <style>
          input{width:200px;height:100px;}
      </style>
  </head>
  <body>
      <form>
          <input type="color">
          <!--<input type="month">-->
          <!--<input type="date">-->
          <!--<input type="datetime-local">-->
          <!--<input type="time">-->
      </form>
  </body>
  </html>​

• <label> 태그
  : 폼 요서에 레이블을 붙일 때 사용
    (레이블 : 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓는 텍스트)
  

  // <label> 태그 안에 <input> 태그 넣기
  <label>레이블명<input type=""></label>
  
  // <label> 태그와 폼 요소를 따로 쓰고 연결하기
  <label for="아이디 이름"></label>
  <input type="" id=">

  - 모든 input type이 되는 건 아니다.
  - display:inline 속성으로 가로세로 값
  - margin:0 auto 적용이 안되기 때문에 웬만하면 display:block으로 바꿔준다.
  - input type이 class이면 안된다. 오직 id일 때만 가능하다.
  - input type 속성을 이어받아 별도로 형태를 잡아서 사용할 때(커스터마이징 가능한 input type 태그) 이용한다.
  

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>입력양식태그#6</title>
      <style>
          input{font-size:20px;border:2px solid red;color:blue;display:none;}
          
          label{width:100px;height:30px;background-color:orange;
                  display:block;margin:0 auto;
                  text-align:center;line-height:30px;color:white;
                  border:2px solid blue;font-size:20px;font-weight:bold;
                  cursor:pointer;}
      </style>
  </head>
  <body>
      <form>
          <input type="file" id="a">
          <label for="a">업로드</label>
      </form>
  </body>
  </html>​

   
• 주요 속성
  - autofocus 속성
    : 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.
  

  <input type=텍스트-입력-필드 autofocus required>​

  - placeholder 속성
    : 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다.
  

  <input type="tel" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>​

  - readonly 속성
    : 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드
  

  <input type=텍스트-입력-필드 readonly>​

  - required 속성
    : 반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만
• <select>, <option> 태그
  : 드롭다운 목록을 만들어 준다.
  - select = ul과 비슷한 역할
  - option = li와 비슷한 역할
  - 클릭을 했을 때 내가 작성해둔 여러 가지 옵션들 중에서 하나를 선택할 수 있게 만들어주는 선택지 태그
    (신발처럼 여러 발 사이즈 옵션 중에서 하나를 선택해야 하는 경우 등등)
  - <select> 태그
     : 기본적으로 옵션이 하나만 표시된다.
     ▷ <select> 태그 속성
         ⅰ) size
             : 화면에 표시할 드롭다운 항목의 개수를 지정
         ⅱ) multiple
             : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용
  - <option> 태그
     : 드롭다운 목록에 표시되는 옵션
     ▷ <option> 태그 속성
         ⅰ) value
             : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다.
         ⅱ) selected
             : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정한다.
• <datalist>, <option> 태그
  : 데이터 목록을 만들어 준다.
  - 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다.
  - <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시한다.
  - value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.
  - 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id값을 지정한다.
  

  <input type="text" list="데이터 목록 id">
  <datalist id="데이터 목록 id">
  	<option value="서버로 넘길 값1">선택 옵션1</option>
  	<option value="서버로 넘길 값2">선택 옵션2</option>
  </datalist>​

• <textarea> 태그
  - input type="text"는 단순하게 글을 입력받을 수 있는 양식을 만들어주는 태그이지만 <textarea> 태그는 오른쪽 하단 바를 클릭 드래그해주면 영역을 넓히고 줄이고 할 수 있으며 내용이 영역을 초과할 경우 스크롤이 생기는 특징이 있다.
  - 옵션
    ⅰ) rows = "숫자"
        : 세로로 몇 줄 까지 작성할 수 있는지 제한하는 옵션
          (지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.)
    ⅱ) cols = "숫자"
        : (스크롤이 생길 때 기준) 영어 기준 가로에 적을 수 있는 글자의 개수 (한국어는 해당 X)
• <button> 태그
  : 버튼을 만들어 주는 태그
  

  <button type="submit">내용</button>
  <button type="reset">내용</button>
  <button type="button">내용</button>​

  - 속성
    ⅰ) submit
         : 폼을 서버로 전송한다.
    ⅱ) reset
         : 폼에 입력한 내용을 초기화한다.
    ⅲ) button
         : 버튼 형태만 만들 뿐 자체 기능은 없다.
  

  <!DOCTYPE html>
  <html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>입력양식태그#7</title>
      <style>
          select{width:100px;height:50px;
                  font-weight:bold;font-size:30px;}
          textarea{font-weight:bold;}
      </style>
  </head>
  <body>
      <!--<select>
          <option>255</option>
          <option>260</option>
          <option selected>265</option>
          <option>270</option>
      </select>-->
      
      <!--input type -> form 작성태그 안에 작성
      select option -> 무조건 작성x -->
      
      <textarea cols="5" rows="6"></textarea>
  </body>
  </html>​