Jump to content

Responsive page for network settings saving


Daniele80

Recommended Posts

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....img01.png

Link to comment
Share on other sites

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.

  • Great Answer 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

 

  • Like 1
Link to comment
Share on other sites

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.

002.png

Link to comment
Share on other sites

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.

002.png

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>

 

Link to comment
Share on other sites

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>

        <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>

Link to comment
Share on other sites

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">
    <!--     
    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>

        <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>

 

Link to comment
Share on other sites

 

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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.