HTML 기초 - form 태그

코드블럭 기능 최고 ~

초반이라 길 잡기가 어렵다

이렇게 하는 게 맞나?.. 싶지만 내 공부 한다고 생각하고 하던거 마저 해 -

 

 

form 태그 : 웹페이지에서 입력폼을 만들 때 사용하는 태그

** 필수 속성 2가지 : method(전달 방식), action(전달 위치) **

 

1. 입력

- input 태그 사용 : 사용자가 입력할 수 있는 공간

- input 태그 안의 여러가지 속성

    1) type :입력하는 값의 종류

    2) name : 입력한 값을 구분하기 위해 이름을 지정

    3) placeholder : 미리보기 텍스트

    4) autofocus : 자동 커서 설정

    5) value : 기본 값 설정

    6) readonly : 읽기 전용 지정

    7) maxlength : 글자 수 제한 지정

 

 

속성을 직접 써보자!

 

ID <input type="text" name="id" placeholder="아이디를 입력하시오." autofocus>
PW <input type="password" maxlength="10">

 

ID PW

 

placeholder로 미리보기 텍스트가, autofocus로 자동 커서가 ID에 설정되어 있는 게 보인다.

PW 타입을 password로 설정해두면 입력을 해도 글자가 가려서 입력해진다.

 

 

 

 

2. 선택

* 선택의 종류

1) input 태그인데 type이 checkbox

2) input 태그인데 type이 radio

3) select 태그

 

(1) checkbox

    : 중복선택 가능 / 필수 속성 2개 : name, value

<p>좋아하는 음료를 모두 고르시오</p>
<input type="checkbox" name="fav" value="ia"> 아메리카노
<input type="checkbox" name="fav" value="mc"> 민트초코
<input type="checkbox" name="fav" value="vl"> 바닐라라떼

 

좋아하는 음료를 모두 고르시오

아메리카노 민트초코 바닐라라떼

 

(2) radio

    : 중복선택 불가능 / 필수 속성 2개 : name, value

<p>성별을 골라주세요</p>
<input type="radio" name="gender" value="man"> 여성
<input type="radio" name="gender" value="woman"> 남성

 

성별을 골라주세요

여성 남성

checkbox 타입은 보면 알다시피 중복선택이 가능하지만

radio 타입은 중복선택이 불가능하다!

 

 

(3) select

    : option이라는 태그가 필수

<P>이메일을 입력하시오.</P>
<input type="text">
@
<select>
<option>naver.com</option>
<option>gmail.com</option>
<option>daum.net</option>
</select>

 

이메일을 입력하시오.

@ naver.com gmail.com daum.net

 

어디서 많이 본 기능이 만들어진다..! 신기해

select는 이렇게 option을 선택할 때 사용된다.

 

 

 

3. 그 외

다른 필요한 기능들

 <h3>그 외</h3>
        <input type="file">
        <br>
        <input type="color">
        <br>
        <input type="number">
        <br>
        <input type="range">
        <br>
        <input type="date">
        <br>
        <input type="datetime-local">

 

위에서부터 차례대로의 결과이다!

 

그 외

 

 

 

4. 제출 및 초기화

★★★ '제출 및 초기화' 파트는 중요한 파트이다!

- submit 과 reset

 

일단 코드는

<input type="submit" value="보내기">
<input type="reset">

 

↑ 이런식으로 보여진다.

원래 '제출'이라는 이름을 가지고 있었지만 value값을 활용하여 보내기로 바꿔보았다.

 

 

제출 및 초기화 버튼의 위치는 무조건 form 태그 내부에 있어야 하고,

 

제출 및 초기화되는 정보는 form 태그 시작 ~ 끝