<input> 태그
:type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정합니다.
type 속성(필수속성)
- text: 일반 문자 (+같이 쓰는 속성: placeholder)
<input type=text placeholder="아이디">
- password: 비밀번호 (+같이 쓰는 속성: placeholder)
<input type=password placeholder="비밀번호">
- number: 숫자 (+같이 쓰는 속성: max, min, step)
<input type=number>
- radio: 한개만 선택할 수 있는 컴포넌트로 name 속성으로 묶어줘야합니다.
<input type=radio name=a value=a> <input type=radio name=a value=b>
- checkbox: 다수를 선택할 수 있는 컴포넌트
<input type=checkbox>
- submit: 양식 제출
<input type=submit>
- reset: 양식 초기화
<input type=reset>
- email: 파일 업로드
<input type=email>
- date: 날짜
<input type=date>
- time: 시간
<input type=time>
- color: 색깔
<input type=color>
value 속성
- 실제 적혀있는 값입니다.
- 모든 인풋태그의 속성으로 쓰일 수 있습니다.
name 속성
<input>요소의 이름을 명시(서버로 전달되는 이름)- 폼(form)이 제출된 후 서버에서 폼 데이터(form data)를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용됩니다.
placeholder 속성
기본적으로 쓰여져 있는 안내글입니다. 실제 값이 아니라 허상 값으로 커서가 앞에 있어 사용자가 입력하면 지워집니다.
<input type="text" placeholder="아이디">
required 속성
사용자가 필수로 입력해야하는 사항에 입력하게 하는 것으로 회원가입을 할 때 폼을 채우지 않으면 안내 문구가 뜹니다.
<input type="text" required>
maxlength 속성
maxlength- 필드의 최대 문자 갯수
<input type="text" maxlength="5">
minlength 속성
minlength- 필드의 최소 문자 갯수
<input type="text" minlength="5">
min,max,step 속성
type="number"에서 사용
- min -최소수치
- max -최대수치
- step- 바뀌는 수의 크기, 단위
<input type="number" min=10 max=50 step=10>
checked 속성
type="radio", "checkbox"에서 사용
자동적으로 체크박스에 체크되어 있도록 설정합니다.
<input type="checkbox"checked>
autofocus 속성
페이지가 로드 될 때 자동적으로 해당
<input>요소가 초점(get focus)을 받도록 합니다.
<input type="text" autofocus>
기타 속성 참고 사이트
http://jun.hansung.ac.kr/CWP/htmls/HTML%20Input%20Attributes.html
<select> 태그
:옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list). <select> 요소 내부의 <option> 요소는 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션을 정의합니다.
<select> 요소는 사용자로부터 입력을 받기 위한 폼(form)에 사용될 수 있습니다.
<select> <option value="americano">아메리카노</option> <option value="caffe latte">카페라테</option> <option value="cafe au lait">카페오레</option> <option value="espresso">에스프레소</option> </select> <br/>
<button>태그
<button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용합니다.
<button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.
브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, 언제나 type 속성값을 명시하는 것이 좋습니다.
type 속성
- button : 누름
- reset : 초기값으로 재설정
- submit : 데이터를 전송함
<button type="button/reset/submit"></button>
기타 속성: value, name, disabled,
버튼 참고 사이트
https://aboooks.tistory.com/301
<input>태그 vs <button>태그
<input type = button>
<button>에 비해서 디자인에 제약이 있습니다.
<button>
텍스트 뿐만 아니라 이미지 or gif 요소를 자식으로 포함할 수 있다.
디자인 폭이 넓습니다.
submit 기능이 기본적으로 들어있어서 submit 하고 싶지 않다면 type = "button" 을 적어줘야 합니다.
