자바스크립트

HTML 필수 태그 정리

mindun 2024. 9. 2. 15:13
반응형

 form 태그

form 사용 측에서 입력을 입력하는 html 양식을 정의
input 입력 컨트롤을 정의
textarea 다중 라인 입력 컨트롤을 정의
label 입력 요소의 레이블을 정의
fieldset 관련 요소를 양식으로 그룹화
legend <fieldset> 요소에 대한 캡션을 정의
optgroup 드롭다운 목록에서 관련 옵션 그룹을 정의
option 드롭다운 목록에서 옵션을 정의함
button 클릭 가능한 버튼을 정의함
select 드롭다운 목록을 정의

 

form 태그의 속성

method 전송 방식 선택 

- get : 256 ~ 4096 byte까지 전송가능
- post : 입력 내용의 길이에 제한 x
name form의 이름
서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
action form을 전송할 서버 쪽의 script 파일을 지정

전송되는 서버 url 또는 html 링크
target action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete 자동완성
enctype 인코딩 방법 명시
novalidate 데이터 유효성 검사 안함 명시

 

 

input 태그

  • type
    • (button 태그)submit : 양식 제출용 버튼, form태그 내부 존재시, form 입력 후 해당 버튼 조작시
                    action을 통해 지정한 서버로 해당 데이터가 전송됨
    • text : 일반 문자, 한 줄짜리 텍스트
    • password : 비밀번호
    • email : 이메일, @ 포함 검사
    • tel : 전화번호
    • url : url 주소
    • textarea : 여러 줄 입력가능
    • >>>>> 숫자 관련
    • range : 숫자 범위 조절 슬라이드 막대
    • number : 숫자 값만 작성 가능한 텍스트 상
    • >>>>> 체크박스
    • radio : 단일 체크박스
    • check : 다수 가능 체크박스
    • select : 드롭다운 박스 
    • option : select의 자식요소
    • >>>>> 시간 관련 
    • data : 연월일
    • month : 연월
    • >>>>> 기타
    • file : 파일 업로드 ( accpet를 활용하여 제출 가능한 혀익 지정가능 )\
  • name : 입력받는 데이터의 이
  • value : 기본적으로 비어있음
                속성 지정시 해당 텍스트 값이 너어진 채로 출력됨

유의 사항

 

폼 태그사이에는 다른 폼 태그 삽입이 안됨.

css를 통한 폰트를 적용 시 form 태그는 폰트가 적용이 되지 않음

 

https://deblisher.tistory.com/entry/html%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0-form-label-input

반응형