JAVA & APP :국비지원 학원 복습/HTML

HTML - 08폼 (FORM)태그

나는선우 2020. 12. 24. 20:02
반응형

2020-12-24 수업내용 복습 겸 정리

 

폼(form) :

웹 페이지에서 사용자로부터 어떤 정보를 입력받아

클라이언트에서 처리하거나 서버로 전송하려면

form 태그와 다양한 입력요소를 사용하면 됨

 

action :  ( 수업때 예제 진행안함)

클라이언트가 전송한 데이터를 처리할 대상 지정

(웹 어플리케이션 서버가 따로 필요하다!)

 

enctype : ( 수업때 예제 진행안함 )

클라이언트가 전송한 데이터의 유형

( 텍스트 전용, 혼합( 다중 : 텍스트+알파) )

 

post vs get

form 태그에 method라는 속성을 이용해서

클라이언트의 데이터를 서버로의 전달방식을 정의함

 

get 방식 :

url 뒤에 질의문자열을 추가해서 전달함

데이터가 그대로 외부에 노출, 전송할 수 있는 데이터의 크기 또한 제한적

데이터의 중요도가 낮고 크기도 작으며 공개되어도 상관없는 경우 사용

 

post 방식 : 

http 요청헤더에 담아서 전달함

데이터가 외부에 노출되지 않음, 전송할 수 있는 데이터의 크기가 무제한

보안성과 활용성이 get방식보다는 많이 좋음

 

폼 관련 요소 

label :

폼의 이름을 붙일 때 사용하는 태그

for 라는 속성을 이용해서 관련있는 입력요소의 id 값을 지정해줘야 함

 

input :

사용자로부터 데이터를 입력받을때 사용하는 태그

( paceholder - 입력요소에 간단한 안내문구 출력)

 

( type - 입력받을 데이터의 유형 정의 :

text, password- 문자데이터

textarea - 대량 문자 데이터

radio, checkbox, select - 다중 선택 데이터

file - 파일 데이터

hidden - 데이터 입력없이 전송함 (화면상에서는 보이지 않음) )

 

( value - 폼에 초기값 지정 )

( readonly - 폼의 입력을 일시적으로 막음 )

( disabled - 폼의 입력을 일시적으로 막고 서버전송도 막음)

( checked - radio, checkbox에 초기선택 설정 )

( selected - select에 초기선택 설정 )

( size - 생성된 입력창의 사이즈 조절 가능 )

( minlength, maxlength - 최소/최대 입력 값 설정 가능 )

 

html5에서 추가된 요소

date, time - 날짜 시간 데이터

number - 숫자 데이터

emial - 이메일 데이터

url - 인터넷 주소 입력

tel - 전화번호

 

required  : 필수입력항목임을 지정

pattern : 정규표현식을 이용해서 입력유형을 제한함

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼태그</title>
</head>

<body>
<h1>폼태그</h1>
<h2>간단한 폼 작성하기</h2>
<form method="post" name="frm1">
    <div><label for="userid">아이디</label>
        <input type="text" name="userid" id="userid">
    </div>

    <div><label for="pwd">비밀번호</label>
        <input type="password" name="passwd" id="pwd">
    </div>

    <div>
        <label></label>
        <button type="submit">로그인하기</button>
    </div>
</form>

<h2>다양한 입력요소 알아보기</h2>
<form name="frm2" method="get">
    <div><input type="text" name="userid" placeholder="아이디"></div>
    <div><input type="password" name="password" placeholder="비밀번호"></div>
    <div><label for="gender">성별</label>
              남<input type="radio" id="gender" name="gender" value="m" checked="checked">
              여<input type="radio" name="gender" value="f">
    </div>
    <div><label for="hobby">취미</label>
            독서<input type="checkbox" id="hobby" name="hobby" value="book">
            여행<input type="checkbox"  name="hobby" value="travel">
            농구<input type="checkbox"  name="hobby" value="basketball" checked="checked">
            축구<input type="checkbox"  name="hobby" value="soccer">
    </div>
    <div>생년<select name="byear">
        <option>1998</option><option>1999</option><option>2000</option>
        <option>2001</option><option>2002</option><option>2003</option>
        <option>2004</option><option>2005</option><option>2007</option>
        <option>2008</option><option>2009</option><option selected="selected">2010</option></select>
        월<select name="bmonth">
        <option>1</option><option>2</option><option>3</option>
        <option>4</option><option>5</option><option>6</option>
        <option>7</option><option>8</option><option>9</option>
            <option>10</option><option>11</option><option selected="selected">12</option></select>
        일<select name="bday">
        <option>1</option><option>2</option><option>3</option>
        <option>4</option><option>5</option><option>6</option>
        <option>7</option><option>8</option><option>9</option>
        <option>10</option><option>11</option><option selected="selected">12</option></select>
    </div>
    <div><label for="intro">자개소개</label>
            <textarea id="intro" name="intro" rows="10" cols="50"></textarea>
    </div>

    <div><label for="attach">파일첨부</label>
             <input type="file" name="attach" id="attach">
    </div>

    <div><input type="hidden" name="today" value="2020-12-24 12:25:00"></div>

    <div><input type="text" name="date" value="2020-12-24" readonly></div>

    <div><input type="text" name="time" value="12:25:00" disabled="disabled"></div>
    <div>
        <button type="submit">입력완료</button>
    </div>
</form>


<h2>HTML5에서 추가된 요소</h2>
<form name="frm3" >
    <div><input type="date" name="date" required="required"></div>
    <div><input type="time" name="time" ></div>
    <div><input type="number" name="age" min="0" max="100"  ></div>
    <div><input type="email" name="email" ></div>
    <div><input type="url" name="url" ></div>
    <div><input type="tel" name="tel" required="required" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"></div>
    <div><button type="submit" >입력완료</button> </div>
</form>

</body>

</html>

 

 

반응형