Form 태그

이종현·2020년 12월 1일
0

HTML

목록 보기
6/8

Form

사용자로부터 Input을 받기 위한 태그

<form action="API주소" method="GET/POST"></form>

Input

입력창, 인풋 필드 input field

<input type="?" placeholder="이름" minlength="5" maxlength="13" required value="???" />

attribute
1.placeholder = 입력창 문구
2.minlength = 최소 길이
3.maxlength = 최대 길이
4.required = 무조건 입력
5.value = 기본값

type
1.text
2.email
3.password
4.url
5.number(min, max)
6.file(accept=".png, .jpeg")

Label

폼 양식에 이름을 붙이는 태그

<label for="user-name">이름</label>
<input id="user-name" type="text" />

Radio & Checkbox

Radio box 단일 선택

<input id="subscribed" name="subscribed" value="subscribed" type="radio" />
<label for=subscribed">구독중</label>
<input id="unsubscribed" name="subscribed" value="unsubscribed" type="radio" />
<label for=unsubscribed">구독 취소</label>

Checkbox 다중 선택

<input type="checkbox" name="skills" value="html" id="html" />
<label for="html">html</label>
<input type="checkbox" name="skills" value="css" id="css" />
<label for="css">css</label>
<input type="checkbox" name="skills" value="js" id="js" />
<label for="js">js</label>
<input type="checkbox" name="skills" value="react" id="react" />
<label for="react">react</label>

Select & Option

<label for="skills">스킬</label>
<select name="skills" id="skills">
	<option value="html">HTML</option>
	<option value="css">CSS</option>
	<option value="javascript">JavaScript</option>
</select>

Textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

Buttons

<button type="submit/button/reset">제출하기</button>
profile
꿈 을 코딩하자

0개의 댓글