8. <input>태그 속성 -html-

8. <input>태그 속성 -html-

 

<INPUT type="text" name="" value="" size="" maxlength=""> 텍스트 입력창

<INPUT type="password" name="" value="" size="" maxlength=""> 패스워드 입력창

<INPUT type="radio" name="" value="" checked> 라디오버튼

<INPUT type="checkbox" name="" value="" checked> 체크박스

<INPUT type="file" name="" size=""> 파일 선택 상자

<INPUT type="image" name="" src="이미지 경로" alt="설명" align=""> 이미지 버튼

<INPUT type="submit" name="" value=""> 전송버튼

<INPUT type="reset" name="" value=""> 취소버튼

<INPUT type="hidden"> 히든

 

<input name="입력필드이름"> : 입력 필드 이름(field name)

<input value="기본값"> : 입력 필드의 기본값(field value)

<input type="text" size="숫자"> : 입력필드의 크기(field size)

<input maxlength="숫자"> : 최대 입력 크기(max length)

 

patern : 입력 형식을 지정한다.

title: 마우스를 올리면 뜨는 문자.

주민번호 : <input type = "text" name = "security_number" pattern = "\d{6}\-\d{7}" title = "123456-1234567 형식으로 입력해주세요"/>

 

플래그 타입의 속성들

readonly="readonly" : input의 입력 칸을 읽기모드로 바꾼다.

recquired: 입력 필수 항목을 만들 때에 사용.

                                      이름 : <input type = "text" name = "name" required>

disabled: 커서도 안 가게 한다.

 

플래그 타입을 <?=$변수?>형식으로 사용할 경우.

<input type=radio type="text" name="q_correct" value="1" <?=$check1?>>

 

style="border:none;" : input의 테두리를 없앤다.

 

class_write.php의 dtree용 <javascript> 코드 안에서 get변수 보내기.

<div class="dtree">

<script type="text/javascript">

 

d = new dTree('d');

 

d.add(0,-1,'수학 1');

d.add(1,0,'1 지수');

d.add(2,1,'1-1 지수','./class/1-1i.php?title=지수&sub=지수2');//get변수 사용하기

// 안되는 줄 알고 무지 고생함. 변수 값에 아무런 따옴표도 쓰지 않는다.

d.add(3,1,'1-2 지수함수','1-2i.php');

:

 

class.php에서 보낸 변수 받기

처음엔 value="$_GET[title]", value=$_GET[title], value=$_GET['title'] 등 여러가지로 해봤는데 안 되서 고생했다.

value="<?=$_GET[title]?>"이다.

value="<?=$_GET['title']?>"도 된다.

<input type="text" name="cl_title" value="<?=$_GET[title]?>" readonly="readonly" style="border:none;">

input 속성 추가기능

 

<form> 태그 내부에서 처리 페이지로 Submit 하려면

<input type="submit" value="전송" />

해당 버튼을 누르게 되면 form 안에 내용들이 form action에 작성된 경로로 날아가게 된다.

 

form을 Submit 시키지 않고 어떤 다른 액션을 추가로 하게 할 때는 아래와 같은 방법이 있다.

<input type="button" value="버튼" onclick="alert('버튼 클릭!')"/>

 

혹은 아래와 같이 이미지에 onclick 이벤트 때에 실행될 자바스크립트 함수를 따로 만들어줄 수도 있다.

<img src="img.jpg" onclick="javascript:submit_function();">

<button> 태그

클릭했을 때 자신이 속한 form 태그를 submit 시켜버린다.

 

간단한 예제 코드로 설명해 보면..

<form id="form1" action="view.jsp">

<input type="text" name="myname" />

<input type="button" value="그냥 버튼"/>

<input type="submit" value="서브밋 버튼" />

<button onclick="alert('111');">1번 버튼</button>

<button onclick="alert('222'); return false;">2번 버튼</button>

</form>

 

위 코드에서 파란색으로 표시된 버튼을 클릭하면 form이 submit 된다.

button 태그의 경우에는 alert을 한번 띄운 이후에 form이 submit 되어버린다.

button 태그를 사용할 때 submit 이 되길 원하지 않는다면 return false 라는 코드를 onclick 안에 넣어주어야 한다.

<input type="image" /> 역시 Submit 버튼과 동일하게 Form을 Submit 한다.

location.href와 그냥 href

<p>

<a href="javascript:OpenLatexEditor('testbox','latex','');">

Launch CodeCogs Equation Editor</a>

</p>

<form>태그 안에서 위와 같이 링크를 걸면 별 문제가 없다.

모양새를 위해서 버튼으로 이쁘게 바꾸려하니까 버튼을 누르면 form이 Submit 되어버린다.

CodeCogs Equation Editor를 사용하기 위해 아래와 같이 사용했다.

<input type="button" value="CodeCogs Equation Editor" onclick="location.href=OpenLatexEditor('testbox','latex',''); return false;">

return false;가 있어도 이건 submit이 된다.

 

<input type="button" value="CodeCogs Equation Editor" onclick="href=OpenLatexEditor('testbox','latex',''); return false;">

이건 submit이 안 된다.

location.href와 그냥 href의 차이점이 뭔가?..