이것저것

[HTML5] form 형식 본문

코딩코딩/HTML5

[HTML5] form 형식

곰태태 2020. 4. 23. 17:56
반응형
SMALL

<form>

서로 다른 속성을 가진 폼이 약 20가지 있다.

method 속성은 거의 get, post 2가지를 쓴다.

 

<form>은 <input>과 같이 쓴다.

 

input 태그는 사용될 수 있는 용도가 많다.

type : input에 작성할 타입을 정해준다. (ex : text, password, submit...)

size : input 상자의 크기를 정해준다. 적지 않으면 기본값으로 출력된다.

value는 아무것도 안 넣을 경우에는 굳이 적어 주지 않아도 된다. 복붙용으로 쓸 때는 value =""로 작성해놓는것이 좋다.

submit : 전송의 의미로 버튼 형식으로 작성된다.

maxlength : 총 입력할 수 있는 글자 수를 제한할 수 있다.

<textarea> : 영어를 기준으로 cols는 가로글자수, rows는 세로 글자 수의 창을 만들어준다. 오른쪽 아래를 커서로 당기면 크기를 늘릴 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form 테스트</title>
</head>
<body>
<h3> 로그인 폼</h3>
<hr/>
<form name = "login" method = "get">
    사용자 ID : <input type = "text" size = "15" value = "ID 입력"><br/>
    비 밀 번 호 : <input type = "password" placeholder="비밀번호 입력" maxlength = "10"><br/>
    자소서 :     <textarea rows="10" cols="3">
                간단하게 작성
            </textarea>
    <input type = "submit" value = "전송">
</form>
</body>
</html>
 
  

input에 value 값을 넣어주면 아래 처럼 검은색으로 ID 입력이 나오는데 input에 입력값을 넣을 때 지워줘야 한다.

그럴 때 placeholder 속성을 적어주면 회색으로 출력이 되는데 이는 입력값을 넣을 때 자동으로 지워진다.

 

Get전송방식과 Post 전송방식의 차이점에 대해서 설명할 줄 알아야 한다.
핵심적인 것은
Get은 데이터를 서버에서 받는 용도이다.
Post는 서버 쪽에 데이터를 등록하는 용도이다.
서버 입장에서 DB에서 로그인 정보를 가져오는 것이 Get이고 처음에 회원가입 정보를 등록하는 것이 Post이다.

 

input 속성에 list를 사용할 때는 list의 값과 datalist의 id 값과 맞춰줘야 한다.

1
2
3
4
5
6
7
직업 : <input type = "text" list = "job"><br/>
        <datalist id = "job">
            <option value = "학생">
            <option value = "직장인">
            <option value = "공무원">
            <option value = "무직">
        </datalist>
 
  

 

<input>의 button 타입과 <button>은 똑같은 기능이어서 둘 중 아무거나 써줘도 된다.

보편적으로도 반반씩 사용한다. 그래도 둘 중 하나는 정확히 알아줘야 한다.

 

checkbox 속성에서 맨뒤에 checked를 입력하면 처음부터 체크된 상태로 출력되고

disable을 입력하면 선택을 못하게 할 수 있다.

1
2
3
4
5
6
7
<form>
    짜장면 <input type = "checkbox" value = "1" checked><br/>
    짬뽕    <input type = "checkbox" value = "2"><br/>
    탕수육<input type = "checkbox" value = "3"><br/>
    볶음밥<input type = "checkbox" value = "4" disabled><br/>
</form>
 
  

radio 속성은 checkbox와 다르게 하나만 선택할 수 있게 한다.

1
2
3
4
5
6
7
8
9
10
<form>
    <input type = "radio" name = "china" value = "1" checked>
        짜장면    <img src = "image/jajang.png" width = 200px height = 150px><br/><br/>
    <input type = "radio" name = "china" value = "2">
        짬뽕        <img src = "image/jambong.png" width = 200px height = 150px><br/><br/>
    <input type = "radio" name = "china" value = "3">
        탕수육    <img src = "image/tang.png" width = 200px height = 150px><br/><br/>
    <input type = "radio" name = "china" value = "4" disabled>
        볶음밥    <img src = "image/bab.png" width = 200px height = 150px><br/><br/>
</form>        
 
  

 

콤보박스

<form>안에 <select>는 콤보박스 전체를 표현하고 <option>은 박스 안의 항목 하나하나를 표현한다.

selected를 추가해주면 처음에 선택된 상태로 나온다.

1
2
3
4
5
6
7
8
<form>
    <select name = "dog">
        <option value = "1">푸들</option>
        <option value = "2">비숑</option>
        <option value = "3">말티즈</option>
        <option value = "4" selected>슈나우져</option>
    </select>
</form>
  

<label>

label을 선택해서 사용자 ID 입력 input창을 만들게 되면 사용자 ID 글자를 눌러도 input창에 커서를 뜨게 할 수 있다.

또 다른 예로는 radio나 checkbox를 사용할 때 버튼이 아닌 글자를 눌러도 선택되는 경우가 label을 사용한 경우이다.

 

label의 방법은 두 가지이다.

첫 번째는 input을 label이 감싸는 경우,

두 번째는 label의 for 값과 input의 id 값을 짝을 지어주는 경우이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<h3>강아지를 입양했다!</h3>
<form>
    어떤 강아지를 입양했나요? <br/><br/>
    <label><input type = "radio" name = "dog" value = "1"> 푸들 <br/></label>
    <label><input type = "radio" name = "dog" value = "2"> 비숑 <br/></label>
    <label><input type = "radio" name = "dog" value = "3"> 말티즈 <br/></label>
    <label><input type = "radio" name = "dog" value = "4"> 슈나우져 <br/></label>
    
    
    <label for = "name">강아지의 이름은 : </label>
    <input id = "name" type = "text" size = "15" placeholder = "댕댕이 이름"><br/>
    <input type = "submit" value = "완료">
</form>
  

 

폼 요소를 그룹핑하는 방법

<fieldset>을 사용해서 폼 요소들을 그룹으로 묶을 수 있다.

<legend>를 사용해서 제목을 지정 후 박스로 묶어 줄 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
<form>
    <fieldset>
        <legend>강아지 정보</legend>
        주인 이메일 : <input type = "email" placeholder = "abd@host.com"><br/>
        주인 블로그 : <input type = "url" placeholder = "http://"><br/> 
        &nbsp;&nbsp;&nbsp;&nbsp;전화번호 : <input type = "tel" placeholder = "010-1234-5678"><br/>
        <input type = "submit" value = "확인"><br/><br/>
    </fieldset>
    
    견종 : <input type = "search" placeholder = "댕댕이"><br/>
    <input type = "submit" value = "제출">
</form>
  

input type을 email로 했을 때 이메일 형식을 지키지 않고 submit 버튼을 누르게 되면 오류 메시지가 뜨게 된다.

url type도 http:// 형식을 지키지 않으면 오류 메시지가 뜨게 된다.

&nbsp는 스페이스를 표현한 것이다.

 

 

반응형
LIST

'코딩코딩 > HTML5' 카테고리의 다른 글

[HTML5]CSS 스타일 시트  (0) 2020.04.24
[HTML] HTML5의 시멘틱 태그  (0) 2020.04.23
[HTML5] 하이퍼링크 | 앵커 | 파일 다운로드 | 미디어 삽입  (0) 2020.04.23
[HTML5] 기본부터 한글적용 | 이미지 삽입 | 테이블 만들기  (0) 2020.04.22
'코딩코딩/HTML5' Related Articles more
Comments