기초) HTML4 form / input type 요소 정리

 

 

 

form

 

 

온라인 서식,

사용자 입력을 위한 폼을

만드는데 사용

 

예) 로그인 / 회원가입 등

 

<form> 요소는 안에

두 가지 속성, 

action 과

method 를

을 넣어야 한다.

 

action :

양식이 제출될 때

폼 데이터를 전송할 위치 지정

 

method :

폼 데이터를 전송하는 방식 지정

GET / POST 방식

 

---

 

사용 예)

<form action="" method="">

 

 

*두 속성의 값은

퍼블리셔가 넣지 않고

개발자들이 넣는다.

 

 

나중에

웹 표준검사(기계적 검사)를

할 때 두 속성을 넣지 않으면

오류가 나기에 속성까지는

입력해 줘야 한다. 

 

---

 

fieldset / legend

 

1️⃣ fieldset :

form의 그룹.

요소 주위에 상자를 그림

 

2️⃣ legend :

fieldset의 제목을 정의

 

 

샘플 코드

 

<form action="" method="">
 <fieldset>
      <legend>로그인</legend>

        로그인에 필요한 코드 입력

</fieldset></form>

 

위 코드의 개념

말로 정리

 

form이라는 요소안에

fieldset이라는

하나의 그룹을 만들어서

그 안에 legend라는 제목,

주제를 만들어 준다.

 

---

 

input type

 

1️⃣ text :

한 줄짜리 글 상자

 

사용할 수 있는

입력 속성으로

 

<input type ="text" "속성" "속성">

 

readonly

disabled

maxlength

value

placeholder

등이 있다

 

 

2️⃣ password

 

 

3️⃣ radio :

단일 선택

 

<ul>
  <li>
     <input type="radio" name="sex">남자
     <input type="radio" name="sex">여자
  </li>
  <li>
     <input type="radio" name="area">서울
     <input type="radio" name="area">경기
     <input type="radio" name="area">세종
  </li>
</ul>

 

radio 는

name이라는 속성과

같이 움직여야 하고

퍼블리셔 입장에서

name 속성은

radio에서만 사용한다.

 

 

 

4️⃣ checkbox :

다중 선택

 

 

5️⃣ file :

첨부 파일

 

 

6️⃣ image :

src 및 

alt (대체 텍스트)를

추가해 주자

 

 

7️⃣ Submit :

value 속성과 함께 사용

 

목적이 있는

버튼임에도 불구하고

우리나라에서는

대부분 쓰지 않는다.

 

이유는 눌리는 효과가

구려서.

 

보통 모든 버튼들은

a 링크에 이미지나

텍스트를 입혀서

따로 만들어 쓴단다

 

 

8️⃣ reset

 

 

9️⃣ button

범용 버튼

 

🔟 hidden :

사용자에게 보이지 않는

입력 폼으로 주로

개발자들이 많이

쓰는 요소

 

---

 

1️⃣ textarea :

다중 편집창

<textarea>

</textarea>

 

rows

cols 로

사이즈 지정 가능

 

실무에서는

쓰지 않고

class를 주고 css로 주던가

인라인 style로 준다.

 

하지만

웹 표준 문법 기준을 

통과하기 위해

빈 값으로 입력해 둔다

 

 

 

2️⃣ select :

옵션 목록표

 

<select <!-- multiple--> >
   <option>서울</option>
   <option>경기</option>
   <option>세종</option>
</select>

 

*속성 값으로

multiple을 주면

다중 선택도 가능하다

 

 

 

2️⃣-1

select의 optgroup :

속성으로 label 을 쓰고

관공서 등에서 많이 씀

 

<optgroup label="">

 

<select>
    
    <optgroup label="서울">
       <option>강남</option>
       <option>한남</option>
       <option>종로</option>
    </optgroup>
    
    <optgroup label="경기">
       <option>판교</option>
       <option>분당</option>
       <option>수지</option>
    </optgroup>

</select>

 

---

 

 

3️⃣ 바로 위

속성으로서의 label 이 아닌

요소로서의 <label>

 

 

레이블에는 3가지 타입

명시적/암묵적/혼합형이

있는데

 

암묵적은 사용하지 말아야 한다.

컨텐츠 접근성 지침에 위반되고

장애인 차별 금지법에도 위반되는

형태로 마크업이 된다.

 

 

 

1. 명시적 label :

 

사용자가 헷갈리지 않도록

고안된 요소로

 

클릭하는 대상과 연결해 준다.

 

 

radio 쪽에는 id 속성과

label 쪽에는 for 속성을 넣어주고

두 값을 똑같이 설정한다.

 

예)

<input type="radio" name="sex" id="ra1"> <label for="ra1"> 남자 </label>
<input type="radio" name="sex" id="ra2"> <label for="ra2"> 여자 </label>

 

 

 

 

2. 혼합형 label :

 

 

<label for="phone">핸드폰 번호</label>
<select id="phone">
      <option>010</option>
      <option>011</option>
      <option>017</option>
      <option>019</option>
</select>
-
<input type="text" title="핸드폰번호 두번째 자리 입력">
-
<input type="text" title="핸드폰번호 세번째 자리 입력">

 

---

 

-번외-

 

 

dl :

정의형 목록 지정  

Define a description List

 

dt :

define terms/names

 

dd :

Describes each term

 

 

샘플 코드

 

<dl>  
   <dt>웹</dt>
     <dd>= 월드 와이드 웹(web)</dd>
     <dd>[명사]Web</dd>
</dl>