웹 프로그래밍

웹 프로그래밍 - form

2020. 9. 17. 00:02ㆍ전공 과목/웹 프로그래밍

웹 프로그래밍 - form

오늘은 form에 대해서 알아보자.

form이란 무엇일까?

form은 웹 페이지를 만들 때 회원가입이나 사용자에게 정보를 입력받는 페이지를 만들때 필수적으로 쓰이는 매우 중요한 태그이다.

바로 실전으로 넘어가보자.

텍스트에 대한 태그 : input type = "text"

비밀번호에 대한 태그 : input type = "password"

체크박스에 대한 태그 : input type = "checkbox"

radio에 대한 태그 : input type = "radio"

select에 대한 태그 : input type = "select"

textarea에 대한 태그 : input type = "textarea"

제출에 대한 태그 : input type = "submit"

취소에 대한 태그 : input type = "reset"

개념은 이렇다. 아래와 같은 화면을 코드로 작성해보자.

소스 코드

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <form method = "get" name = "form1" action = "">
이름:<input type = "text" id = "name" value = "당신의 이름은?"><br>
비밀번호: <input type = "password" id = "pwd"><br>
좋아하는 과목 선택 <input type = "checkbox" id = "subject">국어
                  <input type = "checkbox" id = "subject">영어
                  <input type = "checkbox" id = "subject">수학
                  <input type = "checkbox" id = "subject">역사
                  <input type = "checkbox" id = "subject">지리<br>
 <input type = "radio" id = "subject2">Korean
 <input type = "radio" id = "subject2">English
 <input type = "radio" id = "subject2">Math
 <input type = "radio" id = "subject2">History
 <input type = "radio" id = "subject2">Geographic<br>
 <select name = "city" size ="5" multiple>
 <option>서울</option>
 <option checked>부산</option>
 <option checked>대구</option>
 <option>제주</option>
 <option>광주</option>
 </select>

자기소개서<br>
<textarea name = "city" cols = "20" rows = "10">
</textarea><br>

<input type = "submit" value = "제출"><input type  = "reset" value = "취소">
 </form>
</body>
</html>

textarea와 select는 input type으로 주지않고 바로 태그를 주면 된다.

그리고 select에서 다중으로 선택하기 위해서는 multiple을 주어야 한다.

저작자표시

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

웹 프로그래밍 - DOM-2 (0)	2020.09.17
웹 프로그래밍 - dom (0)	2020.09.17
웹 프로그래밍 - form의 응용 (0)	2020.09.17
웹 프로그래밍- 팩토리얼, 과자 구매하기 (0)	2020.09.05
웹 프로그래밍 -함수, 구구단 출력하기 (2)	2020.09.05

CS 기록장 💻

CS 기록장 💻

태그

최근글

댓글

공지사항

아카이브

웹 프로그래밍 - form

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

관련글

티스토리툴바