Daniele80 Posted November 18, 2023 Share Posted 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.... Quote Link to comment Share on other sites More sharing options...
requinix Posted November 18, 2023 Share Posted 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. 1 Quote Link to comment Share on other sites More sharing options...
Daniele80 Posted November 19, 2023 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
requinix Posted November 19, 2023 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Daniele80 Posted November 22, 2023 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Olumide Posted November 22, 2023 Share Posted 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> 1 Quote Link to comment Share on other sites More sharing options...
requinix Posted November 22, 2023 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Daniele80 Posted November 22, 2023 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Olumide Posted November 22, 2023 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Daniele80 Posted November 22, 2023 Author Share Posted 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> <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> Quote Link to comment Share on other sites More sharing options...
Olumide Posted November 22, 2023 Share Posted 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"> <!-- 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> Quote Link to comment Share on other sites More sharing options...
Daniele80 Posted November 23, 2023 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Olumide Posted November 23, 2023 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Daniele80 Posted November 23, 2023 Author Share Posted November 23, 2023 SUPER!!!!! Quote Link to comment Share on other sites More sharing options...
gizmola Posted November 28, 2023 Share Posted November 28, 2023 @Olumide Just a suggestion for you -- using var in javascript is frowned upon now when you have const and let. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.