Java Script

[Java Script] DOM / Input Control

웹개발자(진) 2024. 4. 1. 22:27
반응형
input type="checkbox"잡담

앞서서 DOM에 대한 짧은 설명과 기본 메서드들 몇 가지를 알아봤었는데요 오늘은 input을 받아서 dom을 사용해 보도록 하겠습니다. 마지막에는 해당 내용들을 이용해서 간단한 프로젝트 한번 해봤는데 좀 더 잘해지고 싶습니다. 딱 봐도 초보자 티가 나긴 하지만 그래도 조금씩 나아지고 있는 거 같아요.

Input Control

Input 컨트롤은 사용자가 웹 페이지나 응용 프로그램에서 텍스트나 데이터를 입력할 수 있도록 하는 HTML 요소입니다. 주로 폼(form) 요소 내에 사용되며, 사용자로부터 정보를 입력받는 데 사용됩니다. 아래는 주요한 input 컨트롤 유형에 대한 설명입니다.

텍스트 입력(input type="text"): 한 줄의 텍스트를 입력할 수 있는 기본적인 텍스트 입력 필드입니다. 사용자가 키보드로 텍스트를 입력할 수 있습니다.

<input type="text" name="username" placeholder="Enter your username">

비밀번호 입력(input type="password"): 사용자가 입력한 값이 화면에 표시되지 않고 마스킹되어 보이는 비밀번호 입력 필드입니다.

<input type="password" name="password" placeholder="Enter your password">

숫자 입력(input type="number"): 숫자 값을 입력할 수 있는 텍스트 필드입니다. 사용자는 숫자 이외의 값은 입력할 수 없습니다.

<input type="number" name="quantity" min="1" max="100" value="1">

이메일 입력(input type="email"): 이메일 형식에 맞는 이메일 주소를 입력할 수 있는 텍스트 필드입니다. 브라우저는 입력된 값이 이메일 형식에 맞는지 검증합니다.

<input type="email" name="email" placeholder="Enter your email">

파일 업로드(input type="file"): 파일을 선택하여 서버로 업로드할 수 있는 파일 업로드 필드입니다.

<input type="file" name="fileUpload">

체크박스(input type="checkbox"): 선택 옵션을 나타내는 체크박스입니다. 여러 개의 항목 중 여러 개를 동시에 선택할 수 있습니다.

<input type="checkbox" name="interest" value="programming"> Programming
<input type="checkbox" name="interest" value="design"> Design

라디오 버튼(input type="radio"): 선택 옵션을 나타내는 라디오 버튼입니다. 여러 개의 항목 중 하나만 선택할 수 있습니다.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

텍스트 영역(input type="textarea"): 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역입니다.

<textarea name="message" rows="4" cols="50"></textarea>

버튼(input type="button"): 사용자가 클릭할 수 있는 버튼입니다. 클릭 이벤트를 처리하기 위해 JavaScript와 함께 사용됩니다.

<input type="button" value="Click me" onclick="alert('Button clicked!')">

제출 버튼(input type="submit"): 폼을 제출할 때 사용되는 버튼입니다. 사용자가 클릭하면 폼 내의 데이터가 서버로 전송됩니다.

<input type="submit" value="Submit">

위의 예시는 주요한 input 컨트롤의 유형입니다. 이러한 input 컨트롤은 웹 애플리케이션의 사용자 인터페이스(UI)를 구성하는 데 중요한 역할을 합니다. 사용자로부터 정보를 입력받고, 이를 서버로 전송하여 처리하는 데 사용됩니다.

전부를 다 예시를 들수는 없고 몇 가지 예시를 들도록 하겠습니다.

 

1. input type="text"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS 스타일을 정의할 수 있는 공간입니다. */
        #my-div1 {
            width: 100px; /* 사각형의 너비를 100px로 설정합니다. */
            height: 100px; /* 사각형의 높이를 100px로 설정합니다. */
            background-color: aqua; /* 사각형의 배경색을 파란색으로 설정합니다. */
        }
    </style>
    <script>
        function myFunc(){
            // 입력 필드에서 값을 가져옵니다.
            var width = document.getElementById("my-input1").value; // 너비 값
            var height = document.getElementById("my-input2").value; // 높이 값
            var color = document.getElementById("my-input3").value; // 배경색 값

            // 사각형 요소를 가져와서 스타일을 변경합니다.
            var myDiv = document.getElementById("my-div1");
            myDiv.style.width = width + 'px'; // 너비를 입력된 값으로 변경합니다.
            myDiv.style.height = height + 'px'; // 높이를 입력된 값으로 변경합니다.
            myDiv.style.backgroundColor = color; // 배경색을 입력된 값으로 변경합니다.
        }
    </script>
</head>
<body>
    <!-- 입력 필드와 버튼이 있는 본문(body) 영역입니다. -->
    <input type="text" id="my-input1"><br> <!-- 너비 값을 입력하는 입력 필드입니다. -->
    <input type="text" id="my-input2"><br> <!-- 높이 값을 입력하는 입력 필드입니다. -->
    <input type="text" id="my-input3"><br> <!-- 배경색 값을 입력하는 입력 필드입니다. -->
    <button onclick="myFunc()">클릭</button> <!-- 버튼을 클릭하면 myFunc 함수가 실행됩니다. -->
    <div id="my-div1"></div> <!-- 변경된 스타일이 적용되는 사각형 요소입니다. -->
</body>
</html>

See the Pen input type="text"2 by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

이 HTML 코드는 다음과 같은 기능을 수행합니다:

  1. 웹 페이지의 제목은 "Document"로 설정됩니다.
  2. 페이지에는 너비, 높이, 배경색을 입력할 수 있는 입력 필드와 변경 버튼이 있습니다.
  3. 입력된 값을 받아와서 입력 필드에 입력된 값에 따라 사각형의 스타일을 변경합니다.
  4. 사각형의 스타일은 CSS로 정의되어 있으며, 너비는 입력된 너비 값으로, 높이는 입력된 높이 값으로, 배경색은 입력된 배경색 값으로 변경됩니다.
  5. 변경된 스타일이 적용된 사각형은 "my-div1"이라는 ID를 가지는 <div> 요소입니다.

따라서 이 페이지를 열고 입력 필드에 값을 입력하고 버튼을 클릭하면 입력된 값에 따라 사각형의 크기와 배경색이 변경됩니다.

 

2. input type="checkbox"

체크박스들과 버튼이 있는 웹 페이지입니다. 체크된 체크박스의 값을 합산하여 알림 창에 표시합니다. 아래는 코드의 각 부분에 대한 주석과 설명입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
    </style>
    <script>
        function myFunc(){
            // 선택된 체크박스의 값을 합산할 변수를 초기화합니다.
            var sum = 0;
            // 클래스 이름이 "my-check"인 모든 요소를 가져옵니다.
            var myCheck = document.getElementsByClassName("my-check");
            // 모든 체크박스를 순회하면서 체크된 경우 값을 합산합니다.
            for(var i = 0; i < myCheck.length; i++){
                // 해당 체크박스가 체크되어 있는지 확인합니다.
                if(myCheck[i].checked === true){
                    // 체크된 경우 해당 체크박스의 값을 정수로 변환하여 합산합니다.
                    sum = sum + parseInt(myCheck[i].value);
                }
            }
            // 합산된 값을 알림창으로 표시합니다.
            alert(sum);
        }
    </script>
</head>
<body>
    <!-- 체크박스와 버튼이 있는 본문(body) 영역입니다. -->
    <input type="checkbox" class="my-check" value="5000"> <!-- 값이 5000인 체크박스입니다. -->
    <input type="checkbox" class="my-check" value="3000"> <!-- 값이 3000인 체크박스입니다. -->
    <input type="checkbox" class="my-check" value="2000"> <!-- 값이 2000인 체크박스입니다. -->
    <button onclick="myFunc()">클릭</button> <!-- 버튼을 클릭하면 myFunc 함수가 실행됩니다. -->
</body>
</html>

See the Pen Untitled by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

이 HTML 코드는 다음과 같은 기능을 수행합니다:

  1. 웹 페이지의 제목은 "Document"로 설정됩니다.
  2. 페이지에는 세 개의 체크박스와 버튼이 있습니다.
  3. 버튼을 클릭하면 JavaScript 함수인 myFunc()가 호출됩니다.
  4. myFunc() 함수는 클래스 이름이 "my-check"인 모든 체크박스 요소를 가져와서 체크된 경우에 해당 체크박스의 값을 합산합니다.
  5. 합산된 값은 알림창에 표시됩니다.

따라서 이 페이지를 열고 체크박스를 선택한 후 버튼을 클릭하면 선택된 체크박스의 값을 합산하여 알림 창에 표시됩니다.

 

3. input type="radio"

라디오 버튼과 버튼이 있는 웹 페이지입니다. 선택된 라디오 버튼의 값을 알림창에 표시합니다. 아래는 코드의 각 부분에 대한 주석과 설명입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
    <script>
        function myFunc(){
            // 클래스 이름이 "my-radio"인 모든 요소를 가져옵니다.
            var myRadio = document.getElementsByClassName("my-radio");
            // 모든 라디오 버튼을 순회하면서 체크된 경우 값을 알림창에 표시합니다.
            for(var i = 0; i < myRadio.length; i++){
                // 해당 라디오 버튼이 체크되어 있는지 확인합니다.
                if(myRadio[i].checked === true){
                    // 체크된 경우 해당 라디오 버튼의 값을 알림창에 표시합니다.
                    alert(myRadio[i].value);
                }
            }
        }
    </script>
</head>
<body>
    <!-- 라디오 버튼과 버튼이 있는 본문(body) 영역입니다. -->
    <input type="radio" class="my-radio" name="radio-group1" value="A"> <!-- 값이 "A"인 라디오 버튼입니다. -->
    <input type="radio" class="my-radio" name="radio-group1" value="B"> <!-- 값이 "B"인 라디오 버튼입니다. -->
    <input type="radio" class="my-radio" name="radio-group1" value="O"> <!-- 값이 "O"인 라디오 버튼입니다. -->
    <button onclick="myFunc()">클릭</button> <!-- 버튼을 클릭하면 myFunc 함수가 실행됩니다. -->
</body>
</html>

See the Pen input type="radio" by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

이 HTML 코드는 다음과 같은 기능을 수행합니다:

  1. 웹 페이지의 제목은 "Document"로 설정됩니다.
  2. 페이지에는 세 개의 라디오 버튼과 버튼이 있습니다.
  3. 버튼을 클릭하면 JavaScript 함수인 myFunc()가 호출됩니다.
  4. myFunc() 함수는 클래스 이름이 "my-radio"인 모든 라디오 버튼 요소를 가져와서 체크된 경우에 해당 라디오 버튼의 값을 알림 창에 표시합니다.

따라서 이 페이지를 열고 라디오 버튼을 선택한 후 버튼을 클릭하면 선택된 라디오 버튼의 값을 알림창에 표시됩니다.

4. Select

입력 필드, 셀렉트 박스, 그리고 JavaScript 함수를 사용하여 도메인을 선택하면 해당 도메인이 입력 필드에 자동으로 추가되는 웹 페이지입니다. 아래는 코드의 각 부분에 대한 주석과 설명입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <style>

    </style>
    <script>
        function myFunc(){
            // 셀렉트 박스에서 선택된 값을 가져옵니다.
            var mySelect = document.getElementById("my-select");
            // 입력 필드를 가져옵니다.
            var myInput = document.getElementById("domain");
            // 입력 필드의 값을 선택된 값으로 설정합니다.
            myInput.value = mySelect.value;
        }
    </script>
</head>
<body>
    <!-- 입력 필드, 셀렉트 박스, 버튼이 있는 본문(body) 영역입니다. -->
    <input type="text">@<input type="text" id="domain"> <!-- 도메인을 입력하는 입력 필드입니다. -->
    <select id="my-select" onchange="myFunc()"> <!-- 선택 옵션을 가진 셀렉트 박스입니다. 선택값이 변경될 때마다 myFunc 함수가 호출됩니다. -->
        <option>선택</option> <!-- 기본 선택 옵션입니다. -->
        <option>naver.com</option> <!-- 네이버 도메인 옵션입니다. -->
        <option>gmail.com</option> <!-- 구글메일 도메인 옵션입니다. -->
        <option>hanmail.net</option> <!-- 다음메일 도메인 옵션입니다. -->
    </select>
</body>
</html>

See the Pen input type="radio" by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

이 HTML 코드는 다음과 같은 기능을 수행합니다:

  1. 웹 페이지의 제목은 "Document"로 설정됩니다.
  2. 페이지에는 도메인을 입력하는 입력 필드와 도메인을 선택할 수 있는 셀렉트 박스가 있습니다.
  3. 셀렉트 박스에서 도메인을 선택하면 JavaScript 함수인 myFunc()가 호출됩니다.
  4. myFunc() 함수는 셀렉트 박스에서 선택된 도메인 값을 가져와서 입력 필드의 값으로 설정합니다.
  5. 입력 필드에 도메인이 입력되면 '@' 기호와 함께 표시됩니다.

따라서 이 페이지를 열고 셀렉트 박스에서 도메인을 선택하면 해당 도메인이 입력 필드에 자동으로 추가됩니다.

글을 마치며

오늘은 Input Control에 대해 배워봤습니다. 앞에서 사용한 코드들은 회원가입이나, 설문조사 등 다양한 곳에서 접할 수 있는 코드들입니다. 기본적으로 많이 사용하기 때문에 꼭 알아 두실 필요가 있다고 생각합니다. 저도 작은 프로젝트 같은 거 할 때 사용할 예정입니다. 예를 들어서 TO DO LIST작성이나 회원가입 웹페이지 만들기 같은 거 해보려고요. 오늘도 감사합니다.

반응형
저작자표시 비영리 변경금지

'Java Script' 카테고리의 다른 글

[Java Script] DOM / audio객체, 동적 생성 및 제거  (0) 2024.04.24
[Java Script] DOM / setAttribute, getAttribute  (0) 2024.04.01
[Java Script] DOM / 기본 메서드  (0) 2024.04.01
[Java Script] JSON, API  (0) 2024.03.25
[Java Script] 내장 객체(Array, Number, String, Date...) , Moment.js, 사용자 정의 객체  (0) 2024.03.22

'Java Script'의 다른글

  • 현재글[Java Script] DOM / Input Control

관련글

티스토리툴바