본문 바로가기
Not Using/Java script/HTML/CSS

TAG_ATTRIBUTE2

longer 2011. 11. 14. 21:32
텍스트 입력양식
-------------------------------------------------------------------------------------------------
[INPUTTag1.HTML]

<BODY>

텍스트박스 1:<INPUT TYPE="text" NAME="TextBox1"><BR><BR>
텍스트박스 2:<INPUT TYPE="text" NAME="TextBox2" SIZE="40"><BR><BR>
텍스트박스 3:<INPUT TYPE="text" NAME="TextBox3" MAXLENGTH="5"><BR><BR>
텍스트박스 4:<INPUT TYPE="text" NAME="TextBox4" VALUE="텍스트박스"><BR><BR>
비밀번호 박스:<INPUT TYPE="password" NAME="password"><BR><BR>
텍스트 에어리어1:<TEXTAREA NAME="TextArea1"></TEXTAREA><BR><BR>
텍스트 에어리어2:<BR>
<TEXTAREA NAME="TextArea2" COLS="40" ROWS="10">텍스트 에어리어입니다.</TEXTAREA><BR><BR>
 
</BODY>

설명:
텍스트 입력양식에는 (INPUT TYPE) text,password가 속성값으로 올수있고 SIZE지정과 MAXLENGTH지정으로 텍스트크기의 제한이 가능하다.
text속성값으로 지정시 VALUE값 지정부분은 텍스트에 기본으로 입력되는값이다.
또한 NAME을 지정해줌으로써 어느부분에 해당하는 텍스트 입력부분인지 알수있으므로 추후 프로그래밍에 도움이 된다.
TEXTAREA는  여러줄의 글자를 입력하는 텍스트 박스를 만들고 ROW와 XOLS속성 값을 이용해 텍스트크기를 지정한다.



-------------------------------------------------------------------------------------------------
 버튼 입력양식
-------------------------------------------------------------------------------------------------

<BODY>
라디오버튼<BR><P>
<INPUT TYPE="radio" NAME="radio" VALUE="radio1">버튼1
<INPUT TYPE="radio" NAME="radio" VALUE="radio2">버튼2
<INPUT TYPE="radio" NAME="radio" VALUE="radio3">버튼3</P>

체크박스<BR><P>
<INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox1">박스1
<INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox2">박스2
<INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox3">박스3
</P>
콤보박스<P><SELECT NAME="선택">
<OPTION VALUE="select1">선택1</OPTION>
<OPTION VALUE="select2">선택2</OPTION>
<OPTION VALUE="select3">선택3</OPTION>
<OPTION VALUE="select4">선택4</OPTION>

</SELECT>
</P>

</BODY>

버튼입력양식에는 INPUT TYPE으로 radio,checkbox가 있고 NAME과 VALUE값을 지정할 수 있다.
콤보박스는 SELECT문을 사용하고 OPTION의 VALUE속성을 이용하여 VALUE값을 지정할 수 있다. 



---------------------------------------------------------------------------------------------
입력 내용 전송하기 
---------------------------------------------------------------------------------------------
<BODY>
 
취소버튼<BR><BR>
<INPUT TYPE="reset"><BR><BR>
<INPUT TYPE="reset" VALUE="취소버튼"><BR><BR>
전송버튼<BR><BR>
<INPUT TYPE="submit"><BR><BR>
<INPUT TYPE="submit" VALUE="전송버튼">

</BODY>
 

텍스트등의 입력취소버튼으로 INPUT의 TYPE으로 속성값이 reset이 있다.
텍스트등의 전송버튼으로 INPUT의 TYPE으로 속성값이 submit이 있다.





<BODY BGCOLOR="GREEN">
<FONT SIZE="5" ALIGN="center"><B>회원 정보 입력</FONT></B>
<HR COLOR="white">

<FORM ACTION="Photo5.HTML" METHOD="post">
<TABLE BORDER="1" WIDTH="500" HEIGHT="500" ALIGN="center" BGCOLOR="white">
<TR>
<TD>아이디</TD>
<TD><INPUT TYPE="text" NAME="id_box"></TD>
</TR>

<TR>
<TD>비밀번호</TD>
<TD><INPUT TYPE="password" NAME="password_box"></TD>
</TR>

<TR>
<TD>이름</TD>
<TD><INPUT TYPE="text" NAME="name_box"></TD>
</TR>

<TR>
<TD>전화번호</TD>
<TD><INPUT TYPE="text" NAME="tel_box1" VALUE="02" SIZE="2">-
<INPUT TYPE="text" NAME="tel_box2" SIZE="4">-
<INPUT TYPE="text" NAME="tel_box3" SIZE="4"></TD>
</TR>

<TR>
<TD>직업</TD>
<TD><SELECT NAME="job">
<OPTION SELECTED>학생</OPTION>
<OPTION >회사원</OPTION>
<OPTION >무직</OPTION>

</SELECT></TD>
</TR>

<TR>
<TD>성별</TD>
<TD><INPUT TYPE="radio" NAME="btn" VALUE="female">여자
<INPUT TYPE="radio" NAME="btn" VALUE="male">남자</TD>
</TR>

<TR>
<TD>취미</TD>
<TD><INPUT TYPE="checkbox" NAME="hobby" VALUE="reading">독서
<INPUT TYPE="checkbox" NAME="hobby" VALUE="game">게임
<INPUT TYPE="checkbox" NAME="hobby" VALUE="watching_movie">영화감상
<INPUT TYPE="checkbox" NAME="hobby" VALUE="listenning_music">음악감상
</TD>
</TR>

<TR>
<TD>자기소개하는 글</TD>
<TD><textarea rows="10" cols="40">자기를 소개 하세요</textarea></TD>
</TR>

<TR>

<TD COLSPAN="2">
<CENTER>
<input TYPE="submit" VALUE="등록하기">
<input TYPE="reset" VALUE="취소하기">
</CENTER>
</TD>

</TR>
</TABLE>

</BODY> 
 

설명
<FORM>태그를 사용하여 폼 양식을 정의한다.
ACTION속성을 사용하여 Photo5.HTML페이지로 사용자가 입력한 데이터를 전송하도록 하고, 전송방식은 METHOD속성을 사용하여 'post'방식으로 지정한다.
 

'Not Using > Java script/HTML/CSS' 카테고리의 다른 글

홈페이지 프레임 연결과 기타태그  (0) 2011.11.15
TAG_ATTRIBUTE3  (0) 2011.11.15
HTML의 기본구조  (0) 2011.11.13
HTML - Getting Started  (0) 2011.11.10
HTML Introduction  (0) 2011.11.10

'Not Using/Java script/HTML/CSS' Related Articles

티스토리툴바