form태그 안에서 input VS button 과 a 링크 사용에 대하여

폼 태그안에 submit 과 일반링크를 혼용해서 사용해야 할 경우가 발생할 때

예전에는 submit 은 input 태그와 일반링크는 button 태그(자바스크립트)를 사용하여 처리하였지만

input 태그는 IE,크롬에서는 상관없지만, 사파리(iphone기기)에서는 다른 랜더링 결과를 보여주고,

button 에 자바스크립트를 사용하였을때는 웹접근성에 문제가 생길수 있었다.

 

그래서 위 문제를 해결하는 결과코드는 아래와 같다

결과 URL : http://time-space.biz/time-space/mobile/ ( 안드로이드폰과 아이폰에서 동일한 버튼 효과를 보이게 된다.)

[html부]

<div id="login">
   <form name="form_login" id="form_login" action="" autocomplete=on" method="post">
   <span id="icon-id"><label data-icon="u" for="id">ID </label></span>
   <input id="id" name="id" placeholder="User Id" required="required" type="text" class="type-text" />
   <button type="submit" class="type-submit">Login</button>
   <div class="clear"></div>
   <span id="icon-pass"><label data-icon="p" for="password">Password </label></span>
   <input id="pw" name="pw" placeholder="User Password" required="required" type="password" class="type-text" />
   <a href="#"><span class="button">New Id</span></a>
   </form>
   </div>

 

[css부]

#login #form_login .type-submit{color:#fff;border:none;
width:89px;
height:40px;
cursor:pointer;
padding: 3px 3px;
text-align:center;
margin: 0px;
background-color:#d8ae1b;
float:right;
font-family:Verdana, Arial, sans-serif;
}

#login .button {border:none;
width:83px;
height:30px;
cursor:pointer;
padding: 3px 3px;padding-bottom:0px;padding-top:10px;
text-align:center;
margin: 0px;
background-color:#d8ae1b;
float:right;
font-family:Verdana, Arial, sans-serif;
}