2023. 6. 16. 09:07ㆍFront/HTML
Form 태그
1. Form 태그
- Form (폼) : 사용자가 웹사이트로 정보를 보낼 수 있는 요소들
예) 아이디, 비밀번호, 이름 등등..
- Form 태그
<form 속성="속성값"> 여러 폼 요소(input태그 등..) </form>
2. Form 태그 속성
1) method : 데이터가 전달되는 방식을 지정 (GET, POST)
2) action : 해당 폼의 데이터가 전송될 주소값
폼 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정. 데이터가 전송될 URL.
3) name: 폼의 이름 지정, 여러 form태그를 구분한다
4) enctype : 해당 데이터가 인코딩되는 방법을 명시
4) target: <action> 태그에서 지정한 파일을 다른 창에서 열도록 지정
5) autocompletet: 자동 완성 기능
Form 요소 태그
1. Input 태그
1) Input 태그 : 사용자 입력을 위한 폼 요소
<input type="유형" 속성="속성값">
2) type 속성
- input 태그의 필수 속성
- input 태그로 만드는 폼 요소의 종류를 지정하는 속성
- type 속성의 여러 속성값
> text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
> hidden: 사용자에게는 보이지 않지만 서버로 넘겨지는 값
> search: 검색상자
> password: 비밀번호를 입력할 수 있는 필드
> radio: 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼 (같이 사용하는 속성 checked)
> checkbox: 주어진 항목에서 2개 이상 선택 가능한 체크박스
> submit: 서버 전송 버튼 (같이 사용하는 속성 value: 버튼 텍스트)
> reset: 리셋 버튼
> button: 그냥 버튼 등등..
> file : 파일 업로드 버튼 (같이 사용하는 속성 accept = "image/*")
3) Input 태그 속성
- name="값" : 서버로 데이터가 전달될 때 사용하는 Key 역할
- value="값" : 서버로 데이터가 전달될 때 사용하는 Value 역할
- placeholder : 입력 힌트 제공, 실제 value는 아님
- readonly : 읽기 전용 - 입력 불가, 데이터가 서버로 전송
- disabled : 읽기 전용, 데이터가 서버로 전송 X
- autofocus: 입력커서 표시하기
- required: 필수요소
<form action="" method = "get" enctype="">
<p>짧은 문자열 입력 시 : <input type="text"></p>
<p>패스워드 입력 : <input type="password"></p>
<p>이메일 : <input type="email"></p>
<p>날짜 : <input type="date"></p>
<input type="radio" name="language" value="korean" checked>한국어
<input type="radio" name="language" value="english" checked>영어
<input type="radio" name="language" value="chinese" checked>중국어
</form>
2. Select 태그
- 사용자로부터 선택 입력을 받을 수 있는 콤보박스(드롭다운 박스) 폼 요소
- 하나 또는 여러 개를 선택할 수 있는 입력 양식 요소
여러개 선택할때 multiple 속성 사용. multiple="multiple"
- 사용 : <select> option태그, optgroup태그, .. </select>
- <option> 태그 : 각각의 요소들
- <optgroup> 태그: 그 요소들을 상위목록으로 묶어주는 태그, label 속성으로 값 입력
<body>
<select name="fruite">
<option value="apple">사과</option>
<option value="grape">포도</option>
</select>
<select multiple = "multiple">
<optgroup label="과일">
<option>사과</option>
<option>포도</option>
</optgroup>
<optgroup label="야채">
<option>오이</option>
<option>당근</option>
</optgroup>
</select>
</body>
3. textarea 태그
- 여러 줄 텍스트 영역, 한 줄 이상의 문장을 입력할 때 사용하는 폼
- 속성
name: 텍스트 영역의 이름
cols: 텍스트 영역 가로 너비를 문자 단위로 지정
rows: 텍스트 영역 세로 길이를 줄 단위로 지정. 지정 숫자보다 줄 개수가 많아지면 스크롤 막대가 생성
placeholder : 입력 힌트 제공, 실제 value는 아님
<textarea name="contents" cols="60" rows="5" placeholder="내용을 입력해주세요">
</textarea>