[HTML] 폼 태그(form)

[HTML] 폼 태그(form)Web_Frontend/HTML & CSS2021. 11. 18. 11:41@Yanako

Table of Contents

1. 폼을 통해 정보를 입력받는 태그

웹사이트에서 회원가입 등 여러 정보를 입력받아 웹 서버로 전달할 때 사용하는 폼을 만들어주는 태그

1) form 태그

- 폼 안에 있는 모든 데이터를 백엔드 서버에 전달한다.

- 전체 양식 설정(화면에 보이지 않지만 양식을 지정해줌)

1-1) form 태그 필수속성

(1) action 속성

① form data를 서버로 보낼 때 해당 데이터가 도착 할 URL을 명시

<form action="https://yanacoding.tistory.com/">

(2) method 속성

① get : 디폴트 값. 도메인에 입력값이 문서헤더에 그대로 보임

- 보안에 취약

② post : 파일 헤더에 정보값이 암호화되어 저장되어, 도메인에는 변화가 없음

- 보안이 필요한 부분에 사용. 로그인 값 등에 사용

<body>
    <form action="#" method="get">
    </form>
</body>

2) input 태그

- 실질적으로 데이터를 입력받을 양식을 입력하기 위한 태그.

2-1) input 태그 속성

(1) name : 입력된 데이터의 이름 정의

(2) value : 기본값 지정

(3) type : 종류 설정

① text : 일반문자

        이름 : <input type="text" name="uname" /><br />
        아이디 : <input type="text" name="uid" /><br />

② password : 비밀번호

        비밀번호 : <input type="password" name="upw" /><br />

③ button : 버튼

④ submit : 양식 제출용 버튼

    <input type="submit"/>

⑤ size : 입력값 사이즈 설정

⑥ radio : 한 개의 값만 선택 가능한 체크박스 생성

        성별구분 : <input type="radio" name="gender" value="m">남, 
                    <input type="radio" name="gender" value="w">여 <br />

⑦ checkbox : 여러개 선택 가능한 체크박스 생성

        사용언어 : <input type="checkbox" name="lan" value="kor" checked="checked" />한글, 
                   <input type="checkbox" name="lan" value="eng" />영어, 
                   <input type="checkbox" name="lan" value="jap" />일어, 
                   <input type="checkbox" name="lan" value="chi" />러시아어<br />

⑧ file, hidden 외

3) textarea 태그 : 글을 길게 입력받는 태그

- rows 속성 : 행

- cols 속성 : 열

        자기소개 : <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br />

4) select 태그 : 여러개의 선택지중에 하나를 선택하게 만드는 태그

- option 태그 : select 태그의 선택지를 만드는 태그

        국적 : <select>
                 <option>KOREA</option>
                 <option>USA</option>
                 <option>JAPAN</option>
                 <option>RUSSIA</option>   
               </select><br />
        좋아하는음식 : <select multiple="multiple">
            <option>김치</option>
            <option>불고기</option>
            <option>파전</option>
            <option>비빔밥</option>
            </select><br />

저작자표시

'Web_Frontend > HTML & CSS' 카테고리의 다른 글

[CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자) (0)	2021.11.18
[HTML] 레이아웃 구성 태그(div, span) (0)	2021.11.18
[HTML] 동영상을 출력하는 태그(video) (0)	2021.11.18
[HTML] 이미지를 나타내는 태그(img) (0)	2021.11.04
[HTML] 소리를 출력하는 태그(audio) (0)	2021.11.04