티스토리 뷰

SWDesk/Web

[HTML] 버턴과 텍스트 입력창 구성 및 반응

inhae 2023. 2. 24. 14:51 
<!DOCTYPE html>
<html>
  <head>
    <title>Android WebView App</title>
  </head>
  <body>
    <h1>Android WebView App</h1>
    <p>Please enter your details:</p>

    <div style="display:flex; flex-direction:column; justify-content:center; align-items:center;">
      <div style="display:flex; flex-direction:row;">
        <button type="button" id="btnSave">Save</button>
        <button type="button" id="btnUpdate">Update</button>
        <button type="button" id="btnDelete">Delete</button>
      </div>

      <div style="display:flex; flex-direction:row;">
        <button type="button" id="btnClear">Clear</button>
        <button type="button" id="btnSearch">Search</button>
        <button type="button" id="btnLogin">Login</button>
      </div>

      <div style="display:flex; flex-direction:row;">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
      </div>

      <div style="display:flex; flex-direction:row;">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </div>

      <div style="display:flex; flex-direction:row;">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
      </div>

      <div style="display:flex; justify-content:flex-end; margin-top:10px;">
        <button type="button" id="btnSend">Send</button>
      </div>
    </div>

    <script>
      // JavaScript 코드
      document.getElementById("btnSave").addEventListener("click", function() {
        alert("Save button clicked!");
      });

      document.getElementById("btnUpdate").addEventListener("click", function() {
        alert("Update button clicked!");
      });

      document.getElementById("btnDelete").addEventListener("click", function() {
        alert("Delete button clicked!");
      });

      document.getElementById("btnClear").addEventListener("click", function() {
        document.getElementById("name").value = "";
        document.getElementById("email").value = "";
        document.getElementById("password").value = "";
      });

      document.getElementById("btnSearch").addEventListener("click", function() {
        alert("Search button clicked!");
      });

      document.getElementById("btnLogin").addEventListener("click", function() {
        alert("Login button clicked!");
      });

      document.getElementById("btnSend").addEventListener("click", function() {
        // 입력된 데이터를 서버로 보내는 코드
        alert("Send button clicked!");
      });
    </script>
  </body>
</html>

 

Android WebView App

Android WebView App

Please enter your details:

 

반응형

'SWDesk > Web' 카테고리의 다른 글

[Flask in Python - 001] Basic Code  (0) 2024.02.05
브라우저에 URL을 입력하면 벌어지는 일  (0) 2023.12.17
[PHP] Data Table from DB  (0) 2023.02.21
[BDIY] Update DataTable  (0) 2021.10.04
[Tistory] Uploading Image File  (2) 2021.08.08
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함