/*
form 은 그냥 태그입니다.
이를 자바스크립트와 연동시켜야 하는데..
지금 포스팅 되는 글은.. 사실 자바스크립트가 아니랍니다 .. >_<
그리고 이번 게시글 만으로는 form 태그를 실용적으로 사용하긴 힘듭니다.
아주 단편적인 정보들을 간략하게 소개하는 정도로 올리는 글이므로.. ;;
검색으로 들어오시는 분들에게는 부족한 정보가 많다고 생각되는군요!
아.. 그럼 일단 ㄱㄱ..
form 태그 : 사용자와 정보를 주고, 받는 기능을 담고 있는 객체입니다. ㅋㅋ
Html 태그는 정보를 제공하는 역할은 하지만 사용자와 정보를 주고받는 상호작용에 대한 역할은 미약.. 하죠 ㅎㅎ
오늘은 엄청난 스크롤 압박을 보게될.. 것이므로.. 천천.. ㅠㅠ 히 갑시다 ㅎㅎ
그럼 form에 대해서 맛보기를 보겠습니다.
<html>
<head>
</head>
<body>
<form name="frame" action="test.asp" method="get" target="_blank">
ID : <input type=text>
</form> //하나로 묶여서 서버로 전송
</body>
</html>
으악? 이게 뭔가요.. <form ~> </form> 태그로 묶여져 있긴 있는데..
name? action?. . 이것들은 속성이라고 합니다. 아래를 보면서 form태그가 어떤것인지 좀더 볼까요?
<!-- 한줄 띄워먹기 ^-^ -->
<form 속성>
1. name : 입력양식 form에 이름을 지정 (폼을 여러개 만든다면 하나의 폼을 지정하는 이름이 된다.)
2.method : 데이터를 전송할 HTTP 프로토콜 설정 (Get , Post 등)
//Get :: 모든 위치를 URL로 표현
//Post :: 전송하는 위치 이외에 모두 감춘다.
3. action : 입력양식을 처리할 서버의 URL을 지정
4. target : 입력양식의 데이터를 서버에서 처리한 후
//받아보는 결과물을 출력 할 창 설정!
form 태그에 사용하는 입력 양식
input, checkbox, select, textarea, botton 등 다양한 입력방식이 있습니다.
이 아래부터는 이 다양한 입력방식을 살펴보겠습니다! ㅇ_ㅇ ㅋㅋ 완전 재밌음
input : type속성을 설정해서 다양한 종류의 입력양식을 만듬. 아래는 type 종류 2가지 입니다.
text와 password!
text 입력양식
한 줄의 글을 입력하게 해주는 글상자
<input type=text> //입력할 수 있는 란을 만듬
속성?
name : 입력양식에 이름을 설정 (폼 태그 이름에 설정하듯..)
value : 글 상자에 입력한 내용 미리 표시
size : 페이지에서 보여지는 글상자의 가로길이
maxlength : 글 상자에 사용자가 입력할 수 있는 최대 글자 수
password 입력방식
글상자에 입력된 내용은 * 로 표시한다. (암호화?)
<input type=password>
속성은 text와 일치하므로 생략합니다.
그럼,, 허접한.. 예제? 흠.. ㅋㅋ
<html>
<head>
</head>
<body>
<form name="frame">
ID : <input type=text name=id size=5 value="흠?" maxlength=8><br>
pw : <input type=password name=pwd size=10 value="what?" maxlength=8>
</form>
</body>
</html>
pw : ***** 되어있는거 what? 이겠지요?.. 흠 아직 뭐가 뭔~지 모르겠습니다.
여튼, name이 id라는 글상자는 size가 5밖에 안되기 때문에 작고..
maxlength는 안에 입력할 수 있는 글 수의 제한수인데.. 8자 이상이 되면 적히지 않는답니다. ㅎㅎ
<!-- 한줄 띄워먹기 ^-^ -->
checkbox 입력방식 : 체크상자가 있는 목록을 만든다. // 중복선택 가능
<input type=checkbox>
name // 하나의 목록에 다양한 체크박스에는 같은 이름을 부여해야한다.
value // 체크상자에 할당할 내용을 표시한다.
checked // 체크상자를 처음부터 체크하게 한다.
radio 입력방식 : check와 다르게목록 중 단 하나만 선택 가능하도록 한다.
<input type=radio>
속성은 checkbox와 같다.
그럼.. 허접한 예제를...
<html>
<head>
</head>
<body>
<form name="frame">
checkbox : <br>
<input type=checkbox name=h value =h1 checked> 닭<br>
<input type=checkbox name=h value =h2> 소<br>
<input type=checkbox name=h value =h3> 개<br>
<input type=checkbox name=h value =h4 checked> 말<br>
radio : <br>
<input type=radio name=a value=a1 checked> 닭<br>
<input type=radio name=a value=a1> 소<br>
<input type=radio name=a value=a1> 개<br>
<input type=radio name=a value=a1 checked> 말<br>
<input type=radio name=B value=a1 checked> 말똥?<br>
</form>
</body>
</html>
체크박스는 checked를 이용해서 처음부터 체크가 되어있네요.
그런데 아래 radio는 분명 목록중 단 하나만 다르게..! 라고 했는데? 도 불구하고
말, 말똥? 둘다 체크가 되어있네요?
일단 웹언어는 위에서 아래로, 왼쪽에서 오른쪽으로 한줄한줄 바로 해석하여
출력하는 인터프리터 언어입니다. 따라서 radio에서 닭이 체크 된후 바로 말이 체크 되므로
닭에 있는 check 표시는 없어지게 되고 말로 옮겨붙습니다. 그리고 말똥? 에는
왜 체크가 되어있냐! name=B 라고 되어있습니다.
목록마다 그 목록의 이름이 name으로 정해지는데, name이 다르므로
같은 radio 목록이 아니라고 생각하여 체크하는데에 영향 (오직 1개 체크)을 미치지 않습니다. 흠?;
<!-- 한줄 띄워먹기 ^-^ -->
botton 입력방식
특정한 내용을 버튼으로 실행하게 해주는 입력방식
<input type=botton>
속성
name 버튼에 이름 부여
value 버튼단추에 표시할 글 입력
submit, reset 입력양식
버튼과 같이 단추를 입력하는 방식
submit 입력양식 폼에 입력된 내용을 서버로 전송
reset 입력양식 폼에 입력된 내용을 초기화
<html>
<head>
</head>
<body>
<form name="frame">
<input type=button name=botton value="click">
<input type=submit name=sm value="send!">
<input type=reset name=re value="초기화 하기">
</form>
</body>
</html>
ex) checkbox를 만들어놓고 클릭한 다음, 초기화 reset 버튼을 누르면
클릭한게 없어지겠죠! 한번 해보세요~ ㅋㅋ
<!-- 한줄 띄워먹기 ^-^ -->
file 입력양식
[찾아보기] 단추와 글상자 입력양식을 가지고 있는 입력 양식
(파일 업로드할 때 자주 쓰입니다.)
컴퓨터에 있는 특정한 파일을 서버로 전송할 때 사용
<input type=file>
속성
name : 입력양식에 이름을 설정
size : 글상자에만 적용, 글상자의 가로길이 설정
<html>
<head>
</head>
<body>
<form name="frame">
<input type=file size=20><br>
</form>
</body>
</html>
찾아보기... 버튼은 자동으로 생기고, 클릭하면 아래와 같이 업로드할 파일 선택창이 뜨게됩니다.
select : 목록을 만들어 메뉴가 펼처지도록 함
<select>
<option> 목록1
<option> 목록2
..
..
</select>
속성 : name : 이름양식에 이름 설정
size : 보여지는 개수를 설정
selected : 선택된 목록을 표시
<HTML>
<HEAD>
</HEAD>
<BODY>
<form name="frame">
<select>
<option>티파니
<option>구혜선
<option selected>아이유
<option>나르샤
</select>
</form>
</BODY>
</HTML>
음.. select 입력 양식에 처럼 size 속성을 넣어준다면
<select size=4>
아래처럼 나오게 됩니당 >_<
textarea : 여러 줄의 글을 입력할 수 있게 한다.
한 줄 이상의 글을 입력할 수 있는 글상자
<textarea>
글을 입력
</textarea>
속성
name 입력양식에 이름 설정
rows 글상자의 세로 길이를 설정
cols 글상자의 가로 길이를 설정
wrap 줄바꿈을 설정
//wrap이 없을 때에는 화면에 보이는 만큼만 쓰여지면
바로 다음줄로 줄바꿈이 되지만,
wrap off를 한다면 사용자가 줄바꿈을 하기 전까지 줄이 계속된다.
<HTML>
<HEAD>
</HEAD>
<BODY>
<form name="frame">
<textarea rows=20 cols=30 wrap=off>
</textarea>
</form>
</BODY>
</HTML>
음.. 만약 wrap=off가 없었다면
아래쪽 스크롤바가 생기지 않고
자동으로 줄넘기기가 되겠습니다.. ㅠㅠ
<!-- 한줄 띄워먹기 ^-^ -->
<!-- 두줄 띄워먹기 ^-^ -->
그럼그럼.. 저 위에 다양한 입력양식들을 이용하여 하나의 예제를 보겠습니다. ㅎㅎ
<html>
<head>
</head>
<body>
<form name="frame">
I D : <input type=text name=id size=10 value="흠?" maxlength=8>
<input type=submit name=sm value="join"><br>
pw : <input type=password name=pwd size=10 value="what?" maxlength=8>
<input type=submit name=sm value="login">
<br><br>
<select>
<option>티파니
<option>구혜선
<option selected>아이유
<option>나르샤
</select>
<br>
checkbox : <br>
<input type=checkbox name=h value =h1 checked> 닭
<input type=checkbox name=h value =h2> 소
<input type=checkbox name=h value =h3> 개
<input type=checkbox name=h value =h4 checked> 말<br>
radio : <br>
<input type=radio name=a value=a1 checked> 닭
<input type=radio name=a value=a1> 소
<input type=radio name=a value=a1> 개
<input type=radio name=a value=a1 checked> 말<br>
<br>
파일을 업로드 하시지요.ㅋㅋ<br>
<input type=file size=25 >
<br>
자기소개<br>
<textarea rows=10 cols=30 wrap=off>
</textarea>
</form>
</body>
</html>
'Web programing > HTML & CSS' 카테고리의 다른 글
| XE의 설치 경로 또는 ./files 디렉토리의 퍼미션이 707이어야 합니다. (6) | 2015.01.18 |
|---|---|
| HTML5 규격 표준 검사기 (0) | 2014.12.04 |
| HTML 이미지 삽입 태그 (0) | 2014.07.26 |
| HTML 하이퍼 텍스트 링크 (0) | 2014.07.26 |
| HTML의 기본 구조(2) (0) | 2014.07.26 |