코딩/HTML

폼이란?

박강원입니다 2023. 4. 12. 22:42
  • 사용자로부터 데이터를 입력받아 서버로 전달할 때 사용된다
  • 서버에서는 데이터를 처리하여 실행 결과를 사용자에게 전달한다
  • 텍스트 상자, 버튼 같은 형태의 폼을 만드는 데는 HTML사용(프론트엔드)
  • 데이터를 처리하는 데는 서버 프로그래밍을 이용(백엔드)

form 태그

폼을 만든다

<form action ="처리할 페이지 주소" method="GET|POST"></form>
  • action : 데이터를 처리할 서버 상의 스크립트 파일주소
  • method : 입력받은 데이터를 서버에 전달할 방식 지정(get|post)
  • get:주소에 데이터를 추가하여 전달하는 방식, 데이터가 주소 입력창에 그대로 드러나며, 전송 데이터 크기가 제한적이다(4,096byte)
  • post:데이터를 별도로 첨부하여 전달하는 방식, 데이터가 드러나지 않고 데이터 크기의 제한이 없다. 보안 및 활용성이 좋다.

input 태그

 

폼에 입력하는 칸을 만든다

 

<input type ="text">//문자 타입 데이터 입력
<input type="password">//문자 비밀번호 데이터 입력

 

fieldset, legend 태그

 

폼 요소를 그룹으로 묶는다

 

<form>
	<fieldset>
    	<legend>그룹정보</legend>
        아이디<br>
        비밀번호
    <fieldset>
</form>

 

label 태그

 

폼 요소에 레이블을 붙인다.

 

<label for="id명"> 레이블명<input type="타입이름" id="id명"> </label>

////////////

<form>
	<fieldset>
    	<legend>그룹정보</legend>
        <label>아이디:</label>
        <label>비밀번호:</label>
    <fieldset>
<form>

폼에서 사용하는 태그 정리

  1. 폼 요소 그룹화 : <fieldset>
  2. 필드셋 제목:<legend>
  3. 입력필드 삽입: <input>
  4. 라벨 입력 : <label>
  5. 드롭다운 목록삽입:<select>, <option>

<option>태그를 사용하여 드롭다운이 형성된 모습

6. 텍스트 영역 삽입 : <textarea>

<text area id="memo" cols="40" rows="4"></textarea>

위 코드로 메모장, 즉 입력할 수 있는 칸이 생긴 모습

7.버튼 삽입 : <button>

  • 클릭할 수 있는 버튼을 정의할 때 사용
  • 버튼 요소 안에는 텍스트나 이미지와 같은 콘텐츠 삽입가능
  • 버튼 요소안에는 언제나 type 속성값 명시
<button type="button">클릭해 보세요!</button>

버튼 삽입의 결과

input 중요 태그

  1. 텍스트 입력 : text
  2. 비밀번호 입력 : password
  3. 라디오 버튼 : radio , 여러 개중 하나만 선택됨 , 요소들의 name이 모두 같아야 함

 

<input type='radio' name='이름' value='값' checked/>여성

radio의 결과물

4. 체크박스: checkbox , 다중 선택가능, 각 요소들의 name이 모두 같아야 함

<input  type='checkbox' name='이름' value='값' checked/>오렌지

checkbox의 결과

 

input 요소 타입 종류

  1. 파일 선택 : file
  2. 전화번호 : tel
  3. 이메일 : email
  4. 날짜: date, 달 :month, 주 week, 시간 time : 달력 아이콘 표시
<input type="date" id="아이디">

 

5. 버튼 입력 : button

6. 전송 버튼:submit

7. 숫자 막대 :range

8. 검색 : search

9. 주소 : url

10. 취소:reset

11. 버튼이미지 : image

12. 히든: hidden, 사용자는 안보이지만 서버로 넘어가는 필드 형 생성

 

input 태그 속성

  1. autofocus:입력필드에 마우스 커서 표시
  2. placeholder: 텍스트 필드에 힌트 표시
  3. readonly : 읽기 전용 지정
  4. required : 필수 입력 지정
  5. max , min : 숫자 입력 필드에서 최대, 최소값 지정
  6. maxlangth, minlength :텍스트필드에서 입력 가능 최대값, 최소값 지정
  7. step : 숫자 필드에서 증감 간격 지정
  8. size : 텍스트필드에서 화면에 표시할 크기 지정
  9. list : 연결할 데이터 목록 지정