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:

 

반응형