5-1. <input> 태그
■ 폼 양식이란?
다음 그림은 웹 사이트의 회원 가입 양식 중의 하나입니다. 이와 같이 웹 페이지에서 사용자가 키보드로 데이터를 입력하거나
마우스로 선택할 수 있는 서식을 폼(Form) 양식이라고 합니다.
위와 같을 폼 양식을 만들기 위해서는 HTML과 CSS를 이용하며 입력한 데이터를 처리하기 위해서는
자바스크립트, 파이썬, PHP, JSP, Node.js 등과 같은 웹 프로그래밍 언어를 사용합니다.
■ 텍스트 입력 창
텍스트 입력 창은 텍스트, 즉 글자를 입력할 수 있는 폼입니다. 다음 예제를 통하여 텍스트 입력 창에 대해 알아봅니다.
텍스트 입력 창 : type="text"
ex5-1.html
<form>
이름 : <input type="text">
</form>
ex5-1.html의 실행 결과
■ 비밀번호 입력 창
다음은 사용자가 비밀번호를 입력할 수 있는 비밀번호 입력 창입니다.
비밀번호 입력 창 : type="password"
ex5-2.html
<form>
비밀번호 : <input type="password">
</form>
ex5-2.html의 실행 결과
■ 라디오 버튼
라디오 버튼은 다음 예제에서와 같이 항목들 중의 하나를 선택할 수 있게 합니다.
라디오 버튼 : type="radio"
ex5-3.html
<form>
성별 : <input type="radio" name="gender" checked> 남성
<input type="radio" name="gender"> 여성
</form>
ex5-3.html의 실행 결과
■ 체크 박스
체크 박스는 라디오 버튼과는 달리 항목를 중복해서 선택할 수 있습니다.
체크박스 : type="checkbox"
ex5-4.html
<form>
<p>취미는?</p>
<input type="checkbox" name="item1" checked>게임
<input type="checkbox" name="item2" checked>영화감상
<input type="checkbox" name="item3">독서
<input type="checkbox" name="item4" checked>만화보기
<input type="checkbox" name="item5">기타
</form>
ex5-4.html의 실행 결과
■ 버튼
다음은 사용자가 입력한 이름과 전화번호를 처리하기 위해 사용된 버튼의 예입니다.
버튼 : type="button", type="submit" , type="reset"
ex5-5.html
<form action="insert.php">
이름 : <input type="text"><br>
전화번호 : <input type="text"><br><br>
<input type="submit" value="저장">
<input type="button" value="중복확인">
<input type="reset" value="다시쓰기">
</form>
ex5-5.html의 실행 결과
■ 파일
다음은 웹 페이지에서 첨부 파일을 업로드할 때 사용되는 파일 폼입니다.
파일 : type="file"
ex5-6.html
<form>
<input type="file">
</form>
ex5-6.html의 실행 결과
■ <input> 태그의 속성
다양한 type 속성 값을 가진 <input> 태그들에서 사용 가능한 주요한 속성들에 대해 알아봅니다.
<input> 태그의 속성
ex5-7.html
<form>
이름 : <input type="text" value="홍길동"><br>
닉네임 : <input type="text"><br>
아이디 : <input type="text" value="hong" readonly><br>
레벨 : <input type="text" value="9" disabled><br>
전화번호 : <input type="text" placeholder="010-123-1234">
</form>
ex5-7.html의 실행 결과
