1.form 태그
사용자가 입력한 데이터를 수집하기 위해 사용된다.
2.form 태그의 속성
| action | 폼 데이터를 처리할 서버 측 스크립트의 URL을 지정 | <form action="/submit-form"> |
| method | 폼 데이터를 제출할 때 사용할 HTTP 메서드를 지정 (GET 또는 POST). |
<form method="post"> |
| enctype | 폼 데이터를 제출할 때 사용할 인코딩 타입을 지정 | <form enctype="multipart/form-data"> |
| target | 폼이 제출된 후 응답을 표시할 위치를 지정 (_self, _blank, _parent, _top). |
<form target="_blank"> |
| autocomplete | 브라우저의 자동 완성 기능 사용 여부를 지정 (on 또는 off). |
<form autocomplete="off"> |
| novalidate | 폼 제출 시 HTML5 검증을 비활성화 | <form novalidate> |
| name | 폼의 이름을 지정 | <form name="userForm"> |
| accept-charset | 서버가 지원하는 문자 인코딩을 지정 | <form accept-charset="UTF-8"> |
2-1.GET , Post
| 특징 | GET | POST |
| 데이터 전송 방식 | URL 쿼리 문자열 | HTTP 요청 본문 |
| URL 길이 제한 | 있음 | 없음 |
| 캐시 가능성 | 가능 | 불가능 |
| 북마크 가능성 | 가능 | 불가능 |
| 데이터 보안 | 낮음 (URL에 노출) | 높음 (본문에 포함, SSL/TLS 사용 시 안전) |
| 멱등성 | 멱등 (같은 요청을 반복해도 결과 동일) | 비멱등 (같은 요청을 반복하면 결과 달라짐) |
| 사용 사례 | 데이터 조회 (검색 쿼리, 필터링) | 데이터 제출 (로그인, 회원가입, 파일 업로드) |
3.input
<!DOCTYPE html>
<input type="button" ><br>
<input type="checkbox" ><br>
<input type="color" ><br>
<input type="date"><br>
<input type="datetime"><br>
<input type="datetime-local"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input type="image" "이미지"><br>
<input type="month" ><br>
<input type="number" ><br>
<input type="password" ><br>
<input type="radio" ><br>
<input type="range" ><br>
<input type="reset" ><br>
<input type="search" ><br>
<input type="submit" ><br>
<input type="tel" ><br>
<input type="text" ><br>
<input type="time" ><br>
<input type="url" ><br>
<input type="week" ><br>
4.select
| select | select form 생성 |
| option | option 생성 |
| optgroup | option을 그룹화한다 |
<select name="선택지">
<optgroup label="음식">
<option value="고기">고기</option>
<option value="생선">생선</option>
</optgroup>
<optgroup label="물건">
<option value="장갑">장갑</option>
<option value="연필">연필</option>
</optgroup>
</select>
5.textarea
여러줄을 입력할때사용
<textarea></textarea>
6.button
어트리뷰트값으로 button, reset, submit를 지정가능
<button type="button" onclick="alert('hello')">버튼</button>
7.fieldset
입력 양식들을 그룹화
<fieldset>
<legend>입력들</legend>
<input type="text" ><br>
<input type="text" ><br>
<input type="text" ><br>
</fieldset>
반응형
'FrontEnd > html' 카테고리의 다른 글
| [HTML] 이미지,멀티미디어 (0) | 2024.06.04 |
|---|---|
| [HTML] 목록, 테이블 (0) | 2024.06.04 |
| [HTML] Hyperlink (0) | 2024.06.04 |
