Responsive page for network settings saving

Daniele80 · November 18, 2023

Hi, I need to have a php page where it allows me to save the network parameters (with input text format check) and decide whether to use DHCP or fixed parameters.
The page must be responsive with a minimum of graphics. I would add the actions to the POST forms. can someone help me?

Thanks in advance

page example....

requinix · November 18, 2023

Most of the time a responsive design moves horizontal elements gradually vertical.

Right now you have Device Info and Network Settings in a left column and the settings themselves in a right column. The first responsive step towards a narrower design is to use one column and make the labels on the left be headings - which they might already be.

Device Info
=======================================

...

Network Settings
=======================================

Ethernet Settings
---------------------------------------

DHCP                                [ ]
IP Address                 [__________]
Subnet Mask                [__________]
Default Gateway            [__________]
DNS                        [__________]

Side note #1: you really ought to support multiple DNS servers.

You could keep the navigation anchors, which I assume exists, by moving the left column into a slide-out menu.

To go narrower, you take the two columns of setting name on the left and setting value on the right and merge them into a single column of setting name then setting value.

Device Info
===================

...

Network Settings
===================

Ethernet Settings
-------------------

DHCP
[ ] Enabled

IP Address
[_________________]

Subnet Mask
[_________________]

Default Gateway
[_________________]

DNS
[_________________]

Side note #2: many interfaces for DHCP present it as a DHCP vs. manual/static option, not just a mere checkbox.

Daniele80 · November 19, 2023

requinix, thanks so much for your explanation and suggestions about side notes.

Do you know where I can find some code examples?

Thanks.

requinix · November 19, 2023

9 hours ago, Daniele80 said:

Do you know where I can find some code examples?

No, because it varies depending on the different CSS and JS frameworks you're using.

If you're using a framework then research what it supports in terms of responsive design. If you aren't, and you don't want to start using one, then learn about CSS media queries so you can write your own responsive rules, and also spend some time understanding your target audience so you know what size screens you should be designing for.

Daniele80 · November 22, 2023

I've to do this page very soon. I'm not a CSS expert. Usually program C.

This is why I asked if there is an example of a responsive page with navigation bar and form with input type. Maybe if I can ask some users.

Olumide · November 22, 2023

3 hours ago, Daniele80 said:

I've to do this page very soon. I'm not a CSS expert. Usually program C.

This is why I asked if there is an example of a responsive page with navigation bar and form with input type. Maybe if I can ask some users.

Below is an example of a simple responsive web page with a navigation bar and a form containing input fields. This example uses HTML and CSS. You can incorporate this code into your project and customize it further as needed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Page with Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
        }

        nav {
            background-color: #555;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        section {
            padding: 20px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<header>
    <h1>Responsive Page</h1>
</header>

<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</nav>

<section>
    <h2>Contact Us</h2>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea>

        <input type="submit" value="Submit">
    </form>
</section>

</body>
</html>

requinix · November 22, 2023

3 hours ago, Olumide said:

Below is an example of a simple responsive web page with a navigation bar and a form containing input fields.

That's not responsive.

Daniele80 · November 22, 2023

Thanks for all replies, guys.

I think for you is a very easy issue. You can see in the attached pic, the selection about DHCP or static.

Do you have a java script code that if I set DHCP mode disable all the network settings and viceversa?

If I set Manual enable all the input type text.

Sorry for my questions...I know could be very easy for you this kind of issue.

Olumide · November 22, 2023

33 minutes ago, Daniele80 said:

Thanks for all replies, guys.

I think for you is a very easy issue. You can see in the attached pic, the selection about DHCP or static.

Do you have a java script code that if I set DHCP mode disable all the network settings and viceversa?

If I set Manual enable all the input type text.

Sorry for my questions...I know could be very easy for you this kind of issue.

Here's a simple example of JavaScript code that achieves the behavior you described:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Forms</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>

    <input type="checkbox" id="toggleButton" onchange="toggleForms()">
    <label for="toggleButton">Toggle Forms</label>

    <form id="form1" class="hidden">
        <!-- Your form content goes here -->
        <p>Form 1</p>
    </form>

    <form id="form2" class="hidden">
        <!-- Your form content goes here -->
        <p>Form 2</p>
    </form>

    <!-- Add more forms as needed -->

    <script>
        function toggleForms() {
            var toggleButton = document.getElementById('toggleButton');
            var forms = document.querySelectorAll('form');

            forms.forEach(function(form) {
                if (toggleButton.checked) {
                    form.classList.add('hidden');
                } else {
                    form.classList.remove('hidden');
                }
            });
        }
    </script>

</body>
</html>

Daniele80 · November 22, 2023

Thanks. I don't want to hidden the input type, maybe disabled. Is it possible?

below the "code" of my page:

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

    <style>
        body {
            font-family:Netto-Pro;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

       @font-face {
          font-family: Netto-Pro;
          src: url(netto_pro.otf);
       }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
        }

        nav {
            background-color: #555;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        section {
            padding: 20px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>

   <SCRIPT LANGUAGE="JavaScript">
   <!--
   function EnableDisableTextBox(status)
   {

   }
   // End -->
   </script>

</head>
<body>

<header>
<h1>Configuration EMA-ETH WEB</h1>
</header>

<nav>
    <a href="#home">Home</a>
    <a href="#">Device Info</a>
    <a href="network.php">Network Settings</a>
</nav>

<section>
    <h2>Device Info</h2>
    <form name="f1" action="004_attivaIPFISSO.php" method="post">

       DHCP <input type="checkbox" name=others onclick="EnableDisableTextBox(this.checked)" >

       <label for="ip">IP Address:</label>
        <input type="text" id="ip" name="ip" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required>

<label for="sm">Subnet Mask:</label>
<input type="text" id="sm" name="sm" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required>

<label for="gw">Default Gateway:</label>
<input type="text" id="dg" name="dg" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required>

</body>
</html>

Olumide · November 22, 2023

2 minutes ago, Daniele80 said:

Thanks. I don't want to hidden the input type, maybe disabled. Is it possible?

below the "code" of my page:

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

    <style>
        body {
            font-family:Netto-Pro;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

       @font-face {
          font-family: Netto-Pro;
          src: url(netto_pro.otf);
       }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
        }

        nav {
            background-color: #555;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        section {
            padding: 20px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>

   <SCRIPT LANGUAGE="JavaScript">
   
   </script>

</head>
<body>

<header>
    <h1>Configuration EMA-ETH WEB</h1>
</header>

<nav>
    <a href="#home">Home</a>
    <a href="#">Device Info</a>
    <a href="network.php">Network Settings</a>
</nav>

<section>
    <h2>Device Info</h2>
    <form name="f1" action="004_attivaIPFISSO.php" method="post">

       DHCP <input type="checkbox" name=others onclick="EnableDisableTextBox(this.checked)" >


       <label for="ip">IP Address:</label>
        <input type="text" id="ip" name="ip" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required>

        <label for="sm">Subnet Mask:</label>
        <input type="text" id="sm" name="sm" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required>

        <label for="gw">Default Gateway:</label>
        <input type="text" id="dg" name="dg" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required>

        <label for="dns">DNS:</label>
        <input type="text" id="dns" name="dns" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required>

       <input type="submit" value="Save">
    </form>
</section>

</body>
</html>

If you want to disable the input elements instead of hiding them, you can modify the JavaScript code to disable or enable the form elements based on the checkbox state. Here's an updated version of the code:

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

    <input type="checkbox" id="toggleButton" onchange="toggleForms()">
    <label for="toggleButton">Toggle Forms</label>

    <form id="form1">
        <!-- Your form content goes here -->
        <p>Form 1</p>
        <input type="text" name="input1" disabled>
        <!-- Add more form elements as needed -->
    </form>

    <form id="form2">
        <!-- Your form content goes here -->
        <p>Form 2</p>
        <input type="text" name="input2" disabled>
        <!-- Add more form elements as needed -->
    </form>

    <!-- Add more forms as needed -->

    <script>
        function toggleForms() {
            var toggleButton = document.getElementById('toggleButton');
            var forms = document.querySelectorAll('form');

            forms.forEach(function(form) {
                var formElements = form.elements;

                for (var i = 0; i < formElements.length; i++) {
                    formElements[i].disabled = toggleButton.checked;
                }
            });
        }
    </script>

</body>
</html>

Daniele80 · November 23, 2023

Thanks. I'm trying but it works only one time.

You can try at this link. You can modify or say to me where's the error.

http://www.contrel.it/demo/network.php

Thanks

Olumide · November 23, 2023

I've modified the form so that when DHCP is turned on, the form inputs are disabled, and when it is turned off, the form inputs are enabled. I've also corrected the duplicate form issue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Configuration EMA-ETH WEB</title>
    
    <style>
        body {
            font-family: Netto-Pro;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @font-face {
            font-family: Netto-Pro;
            src: url(netto_pro.otf);
        }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em;
        }

        nav {
            background-color: #555;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        section {
            padding: 20px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input { 
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>

   <script>
    function toggleForms() {
        var toggleButton = document.getElementById('toggleButton');
        var ipInput = document.getElementById('ip');
        var smInput = document.getElementById('sm');
        var dgInput = document.getElementById('dg');
        var dnsInput = document.getElementById('dns');

        ipInput.disabled = toggleButton.checked;
        smInput.disabled = toggleButton.checked;
        dgInput.disabled = toggleButton.checked;
        dnsInput.disabled = toggleButton.checked;
    }
</script>


</head>
<body>

<header>
    <h1>Configuration EMA-ETH WEB</h1>
</header>

<nav>
    <a href="#home">Home</a>
    <a href="#">Device Info</a>
    <a href="network.php">Network Settings</a>
</nav>

<section>
    <h2>Device Info</h2>
    <form name="f1" action="#" method="post">
        <label>DHCP:</label>
        <label for="toggleButton" class="switch">
            <input type="checkbox" id="toggleButton" onchange="toggleForms()">
            <span class="slider round"></span>
        </label>

        

        <form id="form1">
            <label for="ip">IP Address:</label>
            <input type="text" id="ip" name="ip" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required disabled>
        </form>
        
        <form id="form2">
            <label for="sm">Subnet Mask:</label>
            <input type="text" id="sm" name="sm" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required disabled>
        </form>

        <form id="form3">
            <label for="gw">Default Gateway:</label>
            <input type="text" id="dg" name="dg" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required disabled>
        </form>
        
        <form id="form4">
            <label for="dns">DNS:</label>
            <input type="text" id="dns" name="dns" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" oninput="this.value = this.value.replace(/[^0-9.]+/g, '');" minlength="7" maxlength="15" required disabled>
        </form>

        <input type="submit" value="Save">
    </form>
</section>

</body>
</html>

Daniele80 · November 23, 2023

SUPER!!!!!

gizmola · November 28, 2023

@Olumide Just a suggestion for you -- using var in javascript is frowned upon now when you have const and let.

Sign In

Responsive page for network settings saving

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information