본문 바로가기

Frontend/html

HTML 웹 폼 [Web Form]

<form> 태그

 

<form

action="웹 서버 URL"

enctype="데이터 인코딩 타입"

method="GET / POST"

name="폼 이름"

target="윈도우 이름">

폼 요소 작성

</form>

 

 

폼 요소

 

1. <input type = "text / password / button / submit / reset / image /

checkbox / radio / month / week /date / time / datetime-local / number /

range / color / email / url / tel / search / file">

<input

type="text / password"

name="요소이름"

maxlength="최대입력"

size="창 크기"

value="초기값">

 

2. <button type = "button / reset / submit>

 

3. <select>

 

4. <textarea>

<textarea

cols="열 개수"

rows="행 개수"

name="요소이름"

wrap="자동 줄바꿈 처리(OFF / HARD / SOFT)"

value="초기값">

초기 텍스트

</textarea>

 

 

 

기타

 

1. <datalist>

input type="text"

에 사용할 수 있는 목록 리스트

ex)

<input type="text" list="mylist">

 <datalist id="mylist">

 <option value="1번">

 <option value="2번">

</datalist>

 

2. <lable>

폼 요소 캡션 감싸기

 

3.<filedset>

그루핑

 

4. placeholder 속성

힌트

 

 

 

 

간단한 로그인 예제

<form>
    <fieldset>
    이메일 : <input type="email" placeholder="123@test.com"><br>
    비밀번호 : <input type="password">
   <button type="button">로그인
   </fieldset>
</form>

'Frontend > html' 카테고리의 다른 글

HTML 문서 구조화를 위한 시맨틱 태그 [Semantic Tag]  (0) 2022.09.26
HTML 기본 태그 정리  (0) 2022.09.25