HTML Form,Input,SelectBox,Radio 태그 사용법

회원가입 등을 하기 위해 입력받는 양식을 담을 때 form태그를 사용 한다.

입력받는 양식 각각의 값을 넣을 때 input 태그를 사용한다.

 

1.form 태그

 

• 사용자로부터 다양한 형태의 데이터를 입력받기 위해 필요한 입력 요소들을 담는 컨테이너 개념이다.
  • 입력요소는 <form>태그 내에서 사용해야 한다.
  • 입력요소 : <input>,<select>,<textarea> 등이 있다.
  • 결과 화면에서는 아무것도 표시되지 않는다.
  • form태그에는 action,method 속성 등 여러 속성값이 있다.
    • action = "URL" 
      • 데이터를 전달받아 처리할 페이지의URL을 지정한다.
    • method="전송방식"
      • 데이터 전송에 사용하는 HTTP방법을 지정한다
      • post,get 등
      • post : 
        • HTTP Request 헤더 속에 포함시켜 전송한다.
        • 데이터 길이의 제약이 없다.
        • 보안이 필요한 로그인 정보, 회원 정보 등의 전송에 사용한다.
        • 이전 페이지를 누르면 데이터를 다시 보내야 한다는 경고가 표시된다.
      • get : 
        • 기본값,폼데이터가 이름과 값의 쌍 형태로 URL에 포함되어 전송된다.
        • ex) min-nine.com?name=mingyu&age=28
        • 최대 2048글자(4096바이트) 사용이 가능하다.
        • 보안이 중요하지 않은 데이터(예:검색어) 전달에 사용한다.
        • 이전페이지 버트을 통한 이동 등이 가능하다.
    • name(폼이름)
    • accept-charset(문자인코딩방식)
    • autocomplete(자동완성기능)
    • enctype(method="post"의경우 데이터 인코딩 방식)
    • novalidate(데이터의 유효성 검사를 하지않을 때 사용하는 속성값)
    • target(처리 결과를 보여줄 창을 지정하는 것)

 

2.input 태그

 

• 사용자가 데이터를 입력할 수 있는 입력 타입을 지정할 수 있다.
• <input type="입력타입" 속성="값" >
• type 속성의 값에 따라 다양한 형태의 입력 타입을 가진다.
• 종료태그 없이 사용이 가능하다.
• 속성(type 속성의 값에 따라 사용 가능한 속성이 달라진다)
  • accept,alt,height,width,src,autocomplete,autofocus,checked
  • disabled,form,formaction,formenctype,formmethod
  • formnovaildate,formtarget,list,min,max,step,minlength
  • maxlength,multiple,name,pattern,placeholder,readonly,required,size,type,value 등 이 있다.
• <input> type 속성
  • text : 한줄짜리 텍스트
  • password : 비밀번호
  • radio : 라디오 버튼
  • checkbox : 체크박스
  • hidden : 숨겨진 상태로 입력
  • file : 업로드를 위한 파일 선택
  • image : 이미지를 제출 버튼으로 지정
  • submit : 제출 버튼
  • reset : 입력 초기화 버튼
  • button : 클릭 가능한 일반 버튼 //여기까지 기존에사용되었음
  • search : 검색어 // HTML5부터 추가
  • tel : 전화번호
  • url : URL
  • email : 이메일 주소
  • number : 특정 범위의 숫자
  • range : 특정 범위의 숫자
  • color : 색상
  • date : 날짜(년월일 등)
  • month : 연도의 월
  • week : 연도의 주차
  • time : 시간
  • datetime-local : 날짜의 시간
• <input> type = "text" & "password"
  • type="text"
    • 한줄 짜리 짧은 텍스트를 입력할 때 사용한다.
      • 데이터를 출력하는 용도로 사용 가능하기도 하다.
  • type="password"
    • 비밀번호를 입력할 떄 사용한다.
      • 입력되는 문자가 '*'와 같은 문자로 대체되어 표시된다.
  • type="radio"
    • 나열된 여러 항목중에서 오직 1개의 항목만을 선택 가능하다.
      • 같은 그룹의 항목들에 대해서만 베타적으로 선택이 가능하다.
      • 속성
        • name="이름"
          • 같은 그룹에 속하는 항목들은 동일한 이름을 부여한다.
        • value="텍스트"
          • 입력과 관련해서 서버로 전달되는 값, 항목 내용이다.
        • checked
          • 초기값으로 선택되는 항목 지정
  • type="checkbox"
    • 나열된 여러 항목중에서 여러개의 항목이 동시 선택이 가능하다.
• type="submit"
  • 사용자가 입력한 데이터를 <form> action속서에 지정한 페이지로 전송하는 버튼
  • value="버튼명" 속성
    • 버튼위에 표시되는 이름
• type="reset"
  • 입력한 내용을 모두 지워서 초기 상태로 만드는 취소 버튼
  • value="버튼명" 속성
    • 버튼위에 표시되는 이름
• type="file"
  • 자신의 시스템에 있는 파일을 선택하는 버튼을 생성
  • 속성
    • accept="파일유형"
      • 선택 가능한 파일의 유형을 지정할 수 있다.
    • multiple
      • 하나 이상의 파일/값을 선택할 수 있도록 지정하는 속성
• type="image"
  • 이미지를 제출(전송) 버튼으로 만들 때 사용한다.
  • 속성
    • src
    • width
    • height
    • alt
• type="button"
  • 클릭을 통해 사용자가 지시한 명령을 수행하기 위한 일반 버튼
  • vlaue="버튼명"속성
    • 버튼위에 표시되는 이름
  • form태그 내에서 버튼 사용시에는 <button>태그보다는 type="button"이 좋다.
• <button> 태그
  • 클릭할 수 있는 버튼을 정의하는 태그
  • 버튼위에 text를 표시하는 type="button"과 달리 이미지를 추가로 표시할 수 있다는게 차이점.
• type="search"
  • 검색어를 입력한다.
  • type="text"와 동일한 기능,모양,속성 이 동일하다.
    • 단지 입력 대상을 명확히 지정하고 표현하는 의미가 있다.
• type="tel"
  • 전화번호를 입력한다.
  • type="text"와 동일한 기능,모양,속성 이 동일하다.
    • 단지 입력대상을 명확히 지정하고 표현하는 의미가 있을 뿐.
• required 속성
  • 사용자가 입력하지 않고 submit버튼 누를 경우 입력하라는 경고창이 나타난다.
• pattern 속성
  • 입력값에 대한 유효성 검사를 위한 정규 표현식을 지정한다.
    • 정규 포현식 : 특정한 규칙을 가진 문자열을 표현하는데 사용하는 수식
      • 영문이름 : [a-zA-z]{4,10} -> a~Z까지, 4~10글자를 표헌
      • 전화번호 : 0\d{1,2}\-\d{3,4}\-\d{4}
      • 주민등록번호 : \d{6}\-[1-4]\d{6}
      • 이메일 :
        • /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; 
• type = "url" 
  • URL 입력
    • type="text"와 동일한 기능,모양
  • 자동으로 유효성 검사를 해준다.
• type = "email"
  • 이메일 주소 입력
    • type="text"와 동일한 기능,모양
  • multiple 속성 사용이 가능
    • 콤마로 구분된 여러 개의 이메일 주소를 입력 받을 수 있다.
  • 자동으로 유효성 검사를 해준다.
• type="number"
  • 특정 범위의 숫자 입력
  • 속성
    • min="최소값"
    • max="최대값"
    • step="입력값의 유효 간격"
    • value="초기값"
• type=range"
  • 특정 범위의 숫자 입력
  • 속성
    • min="최소값"
    • max="최대값"
    • step="입력값의 유효 간격"
    • value="초기값"
• type="날짜/시간"
  • type="date"
    • 년,월,일 입력
  • type="month"
    • 년,월 입력
  • type="week"
    • 년,주차 입력
  • type="time"
    • 시간(시,분,초) 입력
  • type="datetime-local"
    • 지역 시간대를 기준으로 년,월,일,시간 입력
• type="color"
  • 색상표를 통한 색상을 입력하게 해준다.

 

 

3.textarea 및 select 태그

 

• <textarea> 태그
  • 여러 줄에 해당하는 텍스트를 입력받을 때 사용한다.
    • <input type="text"> : 한줄에 해당하는 ㄴ짧은 텍스트를 입력
  • 주요속성
    • name : 텍스트 영역의 이름
    • rows : 텍스트 영역의 높이 (라인수)
    • cols : 텍스트 영역의 너비 (한줄에 입력할 수 있는 글자 수)
    • wrap="속성값" :폼으로전송 될 때 줄바꿈 포함 여부
      • soft (기본값) : 자동으로 줄바꿈이 포함되지 않음
      • hard : 자동으로 줄바꿈이 포함되어 진송 (cols 속성 지정이 필요하다)
    • readonly : 텍스트 영역을 읽기 전용으로만 사용할 때 적용.
• <select> 태그
  • 드롭다운 리스트를 만들 때 사용
  • <opction> 태그
    • <select> 태그의 하위 태그로서 목록에서 각 항목들을 정의한다.
    • 속성
      • disabled : 해당 항목을 비활성화 시킨다.
      • label="텍스트" : 긴 항목을 짧은 레이블로 value의 우측에 표시한다.
      • selected : 초기값으로 선택되는 항목으로 지정할 수 있다.
      • value="텍스트" : 서버로 전달되는 항목의 값을 지정한다.
  • 속성
    • name="이름"
    • size="숫자" : 한번에 화면에 보여지는 항목의 개수를 지정할 수 있다.
    • multiple : 여러 항목을 한꺼번에 선택할 수 있다.
• <datalist> 태그
  • <input type="text">에 대한 옵션 목록을 지정한다.
    • 포커스를 받으면 미리 입력한 옵션이 드롭다운 형태로 표시된다.
    • <input type="text" list="datalist_id">
    • <datalist id="datalist_id">
      • <option value="1111" label="1">
    • </datalist>
• <optgroup> 태그
  • <select>내에서 연관된 항목들을 그룹핑 하는 태그이다.
  • <select name="subject">
  • <otpgroup label="1학년과목>
  • <option value="1111">
  • </otpgroup>
  • </select>
• <filedset>태그
  • 폼 내의 관련된 요소들을 그룹핑
    • 사각형 테두리 안에 표시한다.
  • <legend>태그
    • <fieldset>태그 내에서 사용한다.
    • 그룹핑 되는 요소들에 대한 캡션을 사각형 테두리 선 상에 표시한다.
• <label> 태그
  • <input>태그에 대한 레이블 정의
    • 마우스 사용자의 사용성 향상