-
HTML #5 버튼, input웹 서버/웹 기초 (HTML, CSS) 2022. 4. 21. 20:05
1. button
<button type="타입" onclick="기능"> 버튼텍스트</button>
<!DOCTYPE html> <html> <body> <h1>The button Element</h1> <button type="button" onclick="alert('Hello world!')">Click Me!</button> </body> </html>
onclick안에는 보통 javascript코드가 들어가서 함수와 같은 기능을 한다.
버튼텍스트에는 <i>, <b>, <strong>, <br>, <img>의 태그들이 들어갈 수 있다.
2. input
<!DOCTYPE html> <html> <body> <h1>The input element</h1> <form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> <p>Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php".</p> </body> </html>
input도 button처럼 활용할 수 있는데 위의 예제는 이름을 입력하고 submit을 클릭하면 php서버와 연동되는 구조이다.
button과는 달리 말 그대로 무언가를 input하는 용도로 쓰였다는 것을 인지해야한다.
'웹 서버 > 웹 기초 (HTML, CSS)' 카테고리의 다른 글
CSS #2 Box Model (0) 2022.04.22 CSS #1 (0) 2022.04.21 HTML #4 문서타입, head, body (0) 2022.04.21 HTML #3 나열을 의미하는 태그, 테이블 (0) 2022.04.21 HTML #2 개행처리, 단락구분, 이미지, 링크 (0) 2022.04.21