12. 웹폼2
- <input>: 데이터 입력, 종료 태그없이 사용, <form> 태그 중에서 가장 사용 빈도가 높음.
형식: <input type="입력타입형식" 속성="속성값">
. input타입의 형식들.
button(버튼), checkbox(체크박스, 여러 개 선택 가능), color(색상, 컨트롤 생성), date(년.월.일 입력, 컨트롤 생성), datetime(없어짐), datetime-local(년.월.일.시.분.초, 날짜와시간 컨트롤 생성), email(이메일 주소, 자동 유효성검사), file(파일 업로드), hidden(사용자에게 보이지 않는 상태로 데이터를 입력받아 서버로 전송), image(이미지 제출버튼), month(연.월, 컨트롤 생성), number(숫자), password(비밀번호), radio(라디오버튼, 1개의 항목만 선택 가능), range(특정범위 숫자, 슬라이더 컨트롤 생성), reset(초기화 버튼), search(검색어), submit(제출버튼), tel(전화번호), text(텍스트, 디폴트), time(시간, 컨트롤 생성), url(URL, 자동 유효성검사), week(연.주차, 컨트롤 생성)
- <input> 태그의 속성들
. accept: audio, video, image, media_type 지정
. alt: 이미지에 대한 대체 텍스트
. height, width: 이미지의 높이와 넓이
. src: 제출버튼으로 사용할 이미지의 URL
. autocomplete: 지정한 입력 타입(text, password, tel, search, url, email, range, date, pickers, color일때 유효)의 값을 자동으로 완성할 지의 여부
. autofocus: 페이지가 로드될 때 지정된 입력 타입에 포커스
. checked: 페이지가 로드될 때 초기값으로 선택되는 항목
. disabled: input요소 비활성화
. form: input 요소가 form 요소 밖에서 상ㅇ되는 경우에 input 요소가 속하는 폼을 지정
. formaction, formenctype, formmethod, formnovalidate, formtarget: form 요소에서 사용되는 action, enctype, method, novalidate, target 속성을 대체
. list: input 요소에 바인딩되는 datalist 요소 지정
. max, min, step: 최소값, 최대값, 유효한 입력값 간격 지정, 타입이 number, range, date, datetime, datetime-local, month, time, week 일때 유효
. maxlength, minlength: 최대 문자수, 최소 문자수
. multiple: input 요소에 하나 이상의 값을 지정할 수 있도록 함, 타입이 file, email일 경우
. name: 서버로 전달되는 input 요소의 이름
. pattern: 유효성 검사를 위한 정규 표현식, type이 text, password, tel, search, url, email, date일때 유효
. placeholder: 입력할 때 참조할 문자열을 희미한 텍스트로 보여 줌, 타입이 text, password, tel, search, url, email일때 유효
. readonly: input 요소를 읽기 전용으로 지정
. required: 반드시 값이 입력되어야 함을 지정, 타입이 text, search, url, tel, email, password, date pickers, number, checkbox, radio, file일때 유효
. size: 화면에 보이는 문자열의 최대길이, 타입이 text, password, url, search, tel, email일때 유효
. type: input 요소의 입력 타입을 지정
. value: input 요소의 값을 지정, 타입이 button, reset, submit일 때는 버튼 위에 표시되는 텍스트, 타입이 text, password, hidden일 때는 초기값, 타입이 checkbox, radio, image일 때는 서버로 전달되는 값을 나타낸다.
참조: https://sorto.me/docs/Web/HTML/Element/input
#input #form #html #html5 #태그 #tag #input type #input 속성
참고:
- HTML Form Tag: https://poiemaweb.com/html5-tag-forms
HTML5 Tag - Forms | PoiemaWeb
form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.
poiemaweb.com
세상을 링크하라!!! 모든 링크를 한 자리에...
링크닷컴: https://linkdotcom.mycafe24.com/
유용한 링크, 링크닷컴 #무료 #링크사이트 #링크사이트
컴퓨터 및 일반 유용한 링크들을 모아 놓았습니다. 지금 바로 확인하세요!
linkdotcom.mycafe24.com
'웹프로그래밍 > HTML5' 카테고리의 다른 글
[HTML5] dl (0) | 2024.06.08 |
---|---|
[HTML5] 12. 웹폼 3 (0) | 2024.02.08 |
[HTML5] 12. 웹폼 (1) | 2024.01.07 |
[HTML5] 11. 시멘틱 요소 (2) | 2024.01.02 |
[HTML5] 10. 멀티미디어 (1) | 2024.01.01 |