FE/html

form을 submit하는 3가지 태그(button, a, input)

잔망루피 2021. 11. 24. 18:57
<button class="btn btn-link my-2 my-sm-0" style="color : #FFFFFF" type="submit">Logout</button>

버튼 태그를 아래처럼 해도 동작할 줄 알았다.

참고로 버튼의 타입은 기본값이 submit이다.

 

<a role="button" class="btn btn-link my-2 my-sm-0" style="color : #FFFFFF" type="submit">Logout</a>

a 태그를 쓰고 role="button"을 했지만, 동작하지 않았다.

 

 

 

🦄 버튼 태그 대신에 쓸수 있는 방법

<input class="btn btn-link my-2 my-sm-0" style="color : #FFFFFF" type="submit" value="Logout">

input 태그와 type="submit"을 쓰는 방식은 많이 쓰인다고 한다.

 

<a class="btn btn-link my-2 my-sm-0" style="color : #FFFFFF" type="submit" onclick="document.getElementById('test').submit();">Logout</a>

a 태그가 속한 form의 id를 test로 했다.

document.getElementById로 test 아이디를 가진 form을 가져오고, 전송한다.

스택오버플로우를 참고했다.

 

 

 

참고 👉

https://webdir.tistory.com/421

 

input type="submit" vs button 비교

프로젝트를 진행하면서 로 폼의 내용을 전달하는 경우를 많이 접하게 되었습니다. 습관적으로 button 요소로 이를 대체하다가 문득 둘의 차이점이 궁금해서 검색을 해보았고 이와 관련된 내용을

webdir.tistory.com

 

https://stackoverflow.com/questions/40164277/make-a-html-attributie-with-button-role-submit-a-form

 

Make a html attributie with button role submit a form

I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the typ...

stackoverflow.com

 

반응형