Verwandte Themen

Frage
von MrOsmo
19.12.2023, 14:45
Mit Links
Fetch JavaScript Hilfe?

Hallo,

bei mir klappt Folgendes nicht:

Wenn ich bei "Registration Form" alle inputs ausfülle, dann kommt ein sogenanntes "Kärtchen" mit deinem Avatar raus. Jedes "Kärtchen" enthält einen button "Log out", und wenn man auf den button drückt, dann sollte das "Kärtchen" nur aus HTML gelöscht werden (aber nicht aus Backend Server- Api) und der "logged" sollte im Backend Server auf false gesetzt werde.

Wie kann man das machen? Ich habe schon davor mit fetch gearbeitet, aber so ein Problem kommt bei mir zum ersten Mal (Bin ja noch komplett ein Noob in JavaScript).

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration | Form</title>
  <link rel="stylesheet" href="./CSS/settings.css">
  <link rel="stylesheet" href="./CSS/style.css">
  <link rel="stylesheet" href="./CSS/javascriptStyles.css">
  
  <script defer src="./JavaScript/script.js"></script>
</head>
<body>
  <div class="container">
    <div class="container-two">
    <div class="registration-form">
      <h2 id="heading">● Registration Form ●</h2>
      <div class="forms">
        <input id="emailInput" type="text" placeholder="example@gmail.com">
        <input id="userInput" type="text" placeholder="Username">
        <input id="pictureInput" type="text" placeholder="Picture">
        <button id="createButton">Create Account</button>
      </div>
      <p id="signInText">Already have an account? <a href="../PageTwo/index.html" id="aText">Sign in</a></p>
    </div>
    </div>
  </div>


  <div id="registerList">
  </div>
</body>
</html>

JavaScript-Code:

const registerList = document.getElementById("registerList")


const forms = document.getElementById("forms")
const email = document.getElementById("emailInput")
const user = document.getElementById("userInput")
const picture = document.getElementById("pictureInput")


const createButton = document.getElementById("createButton")


const url = "https://crudcrud.com/api/dac4c32dac5c4861a46ad8aee63df14c/todos"



const dataRender = (posts) => {
if (posts === undefined) {
  console.log("Loading...");
}
  else{
    let dataList = posts.map((post) => {
    return `
    <div class="register-container">
    <div class="inner-container">
      <img id="registerPicture" src="${post.picture}" alt="${post.user}"> 
      <h2 id="registerUser">${post.user}</h2>
      <h5 id="registerEmail">${post.email}</h5>
      <button onclick=logOutButton("${post._id}") id="registerButton">Log out</button>
    </div>
  </div>
  `
  })
  registerList.innerHTML = dataList.join("")
}
}


//GET METHOD
fetch (url)
.then(response => response.json())
.then (data => dataRender(data))


//POST METHOD
createButton.addEventListener("click", () => {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      user: user.value,
      email: email.value,
      registered: true,
      logged: true
    })
  })
  .then(response => response.json())
  .then(data => {
    const dataArray = []
    dataArray.push(data)
    dataRender(dataArray)
    
    email.value = ""
    user.value = ""
    picture.value = ""


    console.log(`User ${user.value} registered successful!`)
  })
})


//PUT METHOD
const logOutButton = (id) => {
  const data = {
    user: user.value,
    email: email.value,
    registered: true,
    logged: false
  }
  fetch(`${url}/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => { 
    
  })


}

Bitte helft mir! Ich weiss wirklich nicht wie das geht und möchte jetzt auch nicht den ganzen Tag dazu verschwenden! Denn ich habe noch andere Hausaufgaben.. Dankeschön im Voraus!

LG

MrOsmo

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
Frage
von einem Inkognito-Nutzer
19.12.2023, 11:09
Mit Bildern
Mit Links
Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

Bild zu Frage
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung
1 Antwort
Frage
von MrOsmo
15.12.2023, 08:38
JavaScript Server API Hilfe?

Hallo,

meine Aufgabe:

wenn ich zum Beispiel bei login: babyshark2 schreibe und bei password: 123, und dann auf "send" drücke, dann werden ja diese Daten und zusätzlich noch isLogin: false auf Backend Server geschickt. Wenn ich aber beim zweiten Mal nochmal diese inputs mit den gleichen Daten ausfülle (babyshark2, 12) und dann aber auf "login" drücke, dann sollte das Programm zwischen alle Loginnamen genau diesen Loginname (babyshark2) finden, und falls das Passwort auch richtig ist, dann sollte das isLogin: auf true gesetzt werden. Aber ich verstehe gar nicht wie ich das weitermachen soll. Bitte helft mir!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <form class="form">
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button id="sendButton">Send</button>
    <button id="loginButton">Login</button>
    <p class="p">If you want to delete an Item press the button "Delete" twice to confirm it!</p>


    <div id="userTable"></div>
  </form>
</body>
</html>

JAVASCRIPT IST IN DEN KOMMENTAREN; DA ES HIER NICHT PASST!

MfG

MrOsmo

Software, HTML, IT, Webseite, programmieren, JavaScript, HTML5, Code, Informatik, Programmiersprache, Webentwicklung, Frontend
2 Antworten
Frage
von MrOsmo
14.12.2023, 19:47
Mit Links
javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

Software, App, HTML, IT, Webseite, programmieren, JavaScript, HTML5, Code, Informatik, Programmiersprache, Webentwicklung, Frontend
1 Antwort
Frage
von Xxxoo56
09.12.2023, 20:57
Mit Bildern
Wie kriege ich wenn ich meine PHP-Seite öffnen möchte denn Error / Fehlmeldung behoben?

mir kommt immer diese Fehlmeldung erscheint:

Hier ist der PHP-Code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<?php
$vorname=$_POST['vorname'];
$nachname=$_POST['nachname'];
$strasse_und_hausnummer=$_POST['strasse_und_hausnummer'];
$plz=$_POST['plz'];
$ort=$_POST['ort'];
$telefonnummer=$_POST['telefonnummer'];
$e_mail_adresse=$_POST['e_mail_adresse'];
$pizzasorten=$_POST['pizzasorten'];
$pizzaanzahl=$_POST['pizzaanzahl'];
$groesse_preis=$_POST['groesse_preis'];
$getraenk=$_POST['getraenk'];
$dip=$_POST['dip']; 
$lieferoptionen=$_POST['lieferoptionen'];
$stammkundenkarte=$_POST['stammkundenkarte'];
$bemerkungen=$_POST['bemerkungen'];
$rabatt1=0.05; 
$rabatt2=0.10;
$lieferkosten=4.99;
$zahlung=$groesse_preis*$pizzaanzahl;
$zahlungsbetrag1=$zahlung-($zahlung*$rabatt1); 
$zahlungsbetrag2=$zahlung-($zahlung*$rabatt2);
$zahlungsbetrag3=$zahlung-($zahlung*$rabatt2)+$lieferkosten;
$zahlungsbetrag4=$zahlung-($zahlung*$rabatt1)+$lieferkosten;

 

$gewaehlter_dip = array ( "Knoblauchsauce", "BBQ-Sauce", "Cocktailsauce", "Kein Dip");

 

$gewaehlte_pizzen = array(
    $pizzasorten [0] => "Margherita",
    $pizzasorten [1] => "Pepperoni", 
    $pizzasorten [2] => "Funghi",
    $pizzasorten [3] => "Quattro Formaggi",
    $pizzasorten [4] => "Diavola",
    $pizzasorten [5] => "Veggie Delight",
    $pizzasorten [6] => "Eigenkreation" );

$gewaehlte_pizzen = explode(",", $pizzasorten);

 

foreach ($gewaehlte_pizzen as $gewaehlte_pizza) {
    echo "<p>Sie haben die Pizzasorte " . $gewaehlte_pizza . " ausgewählt.</p>";}

 

foreach ($gewaehlter_dip as $gewaehlter_dip){
         if ($dip != "Kein Dip")
     {
       echo "<p>Sie haben die $dip ausgewählt.</p>";
     break;
     }
        }
    
  if ($pizzaanzahl >= 3 AND $stammkundenkarte == "Nein") 
     {
     echo "<p>Vielen Dank, $vorname $nachname, für Ihre Bestellung!<br />
           Der Zahlungsbetrag beträgt: $zahlungsbetrag1 €(5% Rabatt wurde gewährt).<br />
           Wir freuen uns darauf, Ihnen Ihre $pizzaanzahl Pizza/Pizzen und $getraenk zu liefern!</p>";}   
      
  elseif ($pizzaanzahl >= 3 AND $stammkundenkarte == "Ja") 
         {
         echo "<p>Vielen Dank, $vorname $nachname, für Ihre Bestellung!<br />
               Der Zahlungsbetrag beträgt: $zahlungsbetrag2 € (10% Rabatt wurde gewährt).<br />
               Wir freuen uns darauf, Ihnen Ihre $pizzaanzahl Pizza/Pizzen und $getraenk zu liefern!</p>";} 
       
  elseif ($pizzaanzahl < 3 AND $stammkundenkarte == "Ja") 
       {
         echo "<p>Vielen Dank, $vorname $nachname, für Ihre Bestellung!<br />
           Der Zahlungsbetrag beträgt: $zahlungsbetrag3 € (10% Rabatt wurde gewährt inkl. der Lieferkosten).<br />
         Wir freuen uns darauf, Ihnen Ihre $pizzaanzahl Pizza/Pizzen und $getraenk zu liefern!<br /> 
               Wir schätzen Ihre Treue als Stammkunde!</p>";} 
       
  else {
        echo "<p>Vielen Dank, $vorname $nachname, für Ihre Bestellung!<br />
           Der Zahlungsbetrag beträgt: $zahlungsbetrag4 €(5% Rabatt wurde gewährt inkl. der Lieferkosten).<br />
           Wir freuen uns darauf, Ihnen Ihre $pizzaanzahl Pizza/Pizzen und $getraenk zu liefern!</p>";} 
       
?>
</body>
</html>
Bild zu Frage
HTML, Webseite, MySQL, PHP, Programmiersprache, Webentwicklung
3 Antworten
Frage
von Xxxgs
08.12.2023, 16:02
Mit Bildern
Könnte mir jemand bei der Programmierung meines Kontaktformulars helfen?

das rechte Absende Button ist keiner als das linke Abbrechen Button und kriege es nicht hin sie in der gleichen Größe könnte mir da vielleicht jemand helfen.

hier ist der HTML-Code dazu: 

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bestellformular</title>
<meta name="description" content="Bestellformular" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="Pizzeria.php" method="post">
<table width="50" align="left">
<h1> Bestellformular zum Jubil&auml;um </h1>
<b>Kundeninformationen</b>
<tr><td colspan="1">
    Vorname: </td><td>
    <input type="text" name="vorname"  value=""  size="30" maxlength="" />
</td></tr><tr><td>
  Nachname: </td><td> 
  <input type="text" name="nachname" value="" size="30" maxlength="" />
</td></tr><tr><td>
  Stra&szlig;e & Hausnr.: </td><td>
  <input type="text" name="strasse_und_hausnummer" value="" size="30" maxlength="" />
</td></tr><tr><td>
  PLZ: </td><td>
  <input type="text" name="plz" value="" size="30" maxlength="" />
</td></tr><tr><td>
  Ort: </td><td>
  <input type="text" name="ort" value="" size="30" maxlength="" />
</td></tr><tr><td>
  Telefonnummer: </td><td>
  <input type="text" name="telefonnummer" value="" size="30" maxlength="" />
</td></tr><tr><td>
  E-Mail-Adresse: </td><td>
  <input type="email" name="e_mail_adresse" value="" size="30" maxlength="" />
</td></tr><tr><td valign="top" >
  Pizzasorten: </td><td> 
  <select name="pizzasorten" size="7" >
    <option value="margherita" selected="">Margherita</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="funghi">Funghi</option>
    <option value="quattro formaggi">Quattro Formaggi</option>
    <option value="diavola">Diavola</option>
    <option value="veggie delight">Veggie Delight</option>
    <option value="eigenkreation">Eigenkreation</option>
  </select>
</td></tr><tr><td>
  Pizzaanzahl: </td><td>
  <input type="text" name="pizzaanzahl" value="" size="20" maxlength="" />
</td></tr><tr><td>
  Pizzagr&ouml;&szlig;e & Jubil&auml;umspreise: </td><td>
  <select name="groesse_preis" >
        <option value="small" selected="selected"> Small (&#8960;25cm): 10,49 € </option>
        <option value="medium"> Medium (&#8960;28cm): 11,99 €</option>
        <option value="large"> Large(&#8960;32cm): 14,99 €</option>
    </select>
<br/><br/></td></tr><br/><tr><td valign="top">
    Getr&auml;nk:</td><td>
  <input type="radio" name="getraenk" value="Coca_Cola" /> 
  Coca-Cola (0,5l) <br />
  <input type="radio" name="getraenk" value="Sprite" /> 
  Sprite (0,5l) <br />
  <input type="radio" name="getraenk" value="Fanta" /> 
  Fanta (0,5l) <br />
  <input type="radio" name="getraenk" value="Wasser" /> 
  Wasser (0,5l) 
<br/><br/></td>
</td></tr><tr><td>
  Lieferoptionen:</td><td>
  Abholung
  <input type="radio" name="lieferoptionen" value="Abholung" checked="" />
  Lieferung
  <input type="radio" name="lieferoptionen" value="Lieferung" />
</td></tr><tr><td>
    Stammkundenkarte:</td><td>
  Ja
  <input type="radio" name="stammkundenkarte" value="Ja" checked="" />
  Nein
  <input type="radio" name="stammkundenkarte" value="Nein"/>
</td></tr><tr><td>

 

<br/><br/></td></tr><br/><tr><td valign="top" />
  Bemerkungen:</td><td>
  <textarea name="bemerkungen" cols="30" rows="5"></textarea>
</td></tr><tr><td>
<br/></td></tr><br/><tr><td/>
<input type="Reset" name="" value="Abbrechen" /> </td><td>
<input type="Submit" name="send" value="Absenden" />
</table>
</form>
</body>
</html>
Bild zu Frage
HTML, Webseite, PHP
1 Antwort
Frage
von Noway28YT
07.12.2023, 13:38
HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

LG

HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
3 Antworten
Frage
von SomeDude2304732
06.12.2023, 19:13
Mit Links
http zu https redirect-Fehler auf Wordpress-Seite?

Ich habe eine Wordpress-Website, nennen wir sie example.com, die von IONOS gehostet wird. Es handelt sich um eine HTTPS-Website mit einem funktionierenden SSL-Zertifikat, sodass alle HTTP-Anfragen auf die angeforderte Seite umgeleitet werden sollten, aber dabei das HTTP durch HTTPS ersetzt wird.

Beispiel: http://example.com sollte auf https://example.com umgeleitet werden (das funktioniert). http://example.com/subpage sollte auf https://example.com/subpage umgeleitet werden (das funktioniert jedoch nicht!). Stattdessen passiert Folgendes: http://example.com/subpage leitet auf https://example.com/ um.

Das Hauptproblem dabei ist, dass die Google Search Console fälschlicherweise einen Umleitungsfehler für jede Unterseite erkennt, die sie zu indexieren versucht, obwohl die Indexanfrage speziell für die HTTPS-Seite (https://example.com/subpage) gesendet wurde.

Ich verwende die neueste Version von Wordpress. Die derzeit installierten Plugins sind:

  • Advanced Import
  • Duplicate Page
  • Elementor Pro
  • IONOS Assistant (deaktiviert)
  • IONOS Help (deaktiviert)
  • IONOS Journey (deaktiviert)
  • IONOS Login
  • IONOS Loop (deaktiviert)
  • IONOS Navigation
  • IONOS Performance
  • IONOS Security
  • Music Player for Elementor
  • Title Remover
  • WPvivid Backup Plugin
  • Yoast SEO Premium

Diese Teile meiner .htaccess-Datei könnten für das Problem verantwortlich sein:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(/(.*))?$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
    # ENGINE ON
    RewriteEngine on

    # set hostname directory
    RewriteCond %{HTTPS} on
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:https-%{HTTP_HOST}]

    RewriteCond %{HTTPS} off
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:%{HTTP_HOST}]

    # set subdirectory
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_METHOD} GET
    RewriteCond %{REQUEST_URI} !(.*)/$
    RewriteCond %{REQUEST_FILENAME} !.(gif|jpg|png|jpeg|css|xml|txt|js|php|scss|webp|mp3|avi|wav|mp4|mov)$ [NC]
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}/]

    RewriteCond %{REQUEST_URI} /$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}]

    RewriteCond %{REQUEST_URI} ^$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:/]

    # gzip
    RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:]
    <IfModule mod_mime.c>
        RewriteCond %{HTTP:Accept-Encoding} gzip
        RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:.gz]
        AddType text/html .gz
        AddEncoding gzip .gz
    </IfModule>

    # Main Rules
    RewriteCond %{HTTP_ACCEPT} .*text/html.*
    RewriteCond %{ENV:INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{ENV:REDIRECT_INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{QUERY_STRING} ^$
    RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-content/cache)/.*
    RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
    RewriteCond /homepages/9/d4297862886/htdocs/./wordpress/wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} -f
    RewriteRule ^(.*) /wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} [L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Meine Permalink-Einstellung in Wordpress ist wie folgt:

https://example.com/%category/%postname%/
Homepage, HTML, Webseite, WordPress, Webentwicklung, Webserver, htaccess, ionos
2 Antworten
Frage
von GeldGeil457
05.12.2023, 15:38
Frage wurde 1 Mal erneut gestellt
Mit Links
Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

 (Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

HTML, Webseite, CSS, HTML5, Code, PHP, Programmiersprache, Python, Webdesign, Webentwicklung, Frontend, Python 3, Selenium
1 Antwort
Frage
von SusgUY446
05.12.2023, 10:32
Mit Bildern
wie kann man das beheben?

sidebar.css.sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #333;
    transition: right 0.3s ease; 
  }
  
  .sidebar-open {
    right: 0;
  }

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: relative;
}


.sidebar li {
    float: left;
  }

.sidebar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
.sidebar li a:hover {
    background-color: #111;
}

 

  private.php

<?php
session_start();
if(!isset($_SESSION["username"])){
  header("Location: index.php");
  exit;
}
$username = $_SESSION["username"];
 ?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    
    <!-- Import Styles -->
    <link rel="stylesheet" href="cnd/css/loader.css">
    <link rel="stylesheet" href="cnd/css/container.css">
    <link rel="stylesheet" href="cnd/css/color-changer.css">
    <link rel="stylesheet" href="cnd/css/background.css">
    <link rel="stylesheet" href="cnd/css/navbar.css">
    <link rel="stylesheet" href="cnd/css/sidebar.css">
    
    <title>Your Personal Site</title>

    <!-- import scripts -->
    <script src="cnd/js/sidebar.js"></script>
    <script src="cnd/js/loader.js"></script>

    <script>
        
        const imageFiles = [
            'baldur.jpg',
            'baldur2.jpg',
            'baldur3.jpg',
            
        ];

        
        function setRandomImage() {
            const randomIndex = Math.floor(Math.random() * imageFiles.length);
            const randomImage = imageFiles[randomIndex];
            const imgElement = document.querySelector('.random-img');
            imgElement.src = `/personal-site/images/${randomImage}`; 
        }

        
       
    </script>
    <script>
        

        function setColor(color) {
            document.body.style.backgroundColor = color;
        }

        
    </script>


  </head>
  <body>
    
  <div class="loader"></div>
  
  <div class="container">
      <h1>Hallo <?php echo $username?></h1>
      <img src="" alt="random image of my dog" width="900px" height="900px" class="random-img">
      
    <script>
      setRandomImage();
    </script>
    <style>
      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
      }

      .dropdown:hover .dropdown-content {
          display: block;
      }

    </style>
    

  </div>
  
  <div class="dropdown">
    <span>Change Color</span>
    <div class="dropdown-content">
      <div class="color-changer">
        <button onclick="setColor('green')" class="button-green">Green</button>
        <button onclick="setColor('red')" class="button-red">Red</button>
        <button onclick="setColor('blue')" class="button-blue">Blue</button>
      </div>
    </div>
    </div>
    
    <div class="navbar">
      <ul>
        <li>
          <a href="index.php">Home</a>
        </li>
        <li>
          <a href="games.php">Games</a>
        </li>
        <li class="account-dropdown">
          <a href="">Account
      </li> 
      </ul>
    </div>

    <div class="sidebar" id="sidebar">
      <ul>


        <li>
          <a href="">Home</a><br>
        </li>

        <li>
          <a href="">Pricing</a><br>
        </li>

        <li>
          <a href="">Settings</a><br>
        </li>
      </ul>
    </div>

  </body>
</html>
Bild zu Frage
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
Frage
von MrOsmo
03.12.2023, 22:31
javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

LG

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
1 Antwort
Frage
von MrOsmo
02.12.2023, 22:09
Frage wurde 1 Mal erneut gestellt
Mit Bildern
Wie kann ich die Reihenfolge der Hintergrundfarben ändern?

Hallo zusammen!

ich mache gerade die Hausaufgaben in IT aber ich komme leider nicht weiter.

Wie ihr auf dem Foto bereits seht, habe ich zwei Hintergründe.

Aber das Problem ist, dass der erste Hintergrund unten sein soll und der zweite Hintergrund, der gerade unten ist, soll nach oben kommen. Also einfach gesagt, ich möchte die Reihenfolge der Hintergrundfarben ändern. Ich habe schon wirklich lange daran gesessen.

Ich weiß nicht, wie man es weiter macht. Könnte mir bitte jemand helfen?

P.S. JavaScript passt leider nicht in die Frage hinein. Ihr findet es in den Kommentaren!

Dankeschön im Voraus.

LG!

Übrigens, hier die Codes:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <div class="bodyDiv">
  <header>
    <div class="title">
      <h1>My Tasks</h1>
    </div>
  </header>
  <main>
    <section>
      <div class="inputs">
        <input id="inputOne" type="text" placeholder="Enter your task!">
        <input id="inputTwo" type="date" placeholder="Enter your date!">
        <button id="buttonForInputs">Add task!</button>
      </div>
    </section>
    <section>
      <div class="tasks">
        <div class="date"> 
          <div class="information"></div>
        </div>
      </div>
    </section>    
   <section>
    <div class="buttons">
      <button id="buttonOne">Delete all!</button>
      <button>Change status!</button>
    </div>
   </section>
  </main>
  </div>
</body>
</html>

CSS:

* {
  margin: 0;
  box-sizing: border-box;
}


/*BODY_AND_HTML*/
html {
background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%,rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%),linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%,rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%,rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%),linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%,rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%),linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%,rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%),linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%,rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(90deg, rgb(249, 17, 190),rgb(100, 28, 213));
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}

/*HEADER*/

header .title {
  display: flex;
  justify-content: center;
}


header h1 {
  font-size: 4rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fff;
}

/*MAIN*/

.tasks {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}

.tasks .date .information p {
  margin-top: -210px;
  margin-left: -190px;
  color: #fff;
  font-weight: 100;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.tasks .date {
  background-color: orange;
  width: 20%;
  padding-bottom: 20px;
  border-radius: 9px;
  display: none;  
}

.tasks .date .information {
  background-color: rgb(219, 182, 112);
  padding-top: 220px;
  border-radius: 5px;
  text-align: start;
  display: none;
}

.tasks .date p {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.inputs {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.inputs input {
  width: 30%;
  height: 30px;
  border-radius: 7px;
}

.inputs #inputOne {
  margin-top: 150px;
}

.inputs #inputTwo {
  margin-top: 10px;
}

.inputs button {
  margin-top: 15px;
  width: 8%;
  height: 30px;
  margin-right: 320px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-right: 150px;
  margin-top: 30px;
  gap: 10px;
}

.buttons button {
  width: 11%;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}
Bild zu Frage
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
2 Antworten
Frage
von Selinaaaaae
30.11.2023, 15:02
Mit Bildern
Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}
Bild zu Frage
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
Frage
von NilsApps
28.11.2023, 13:15
Mit Links
Quellcode mit einem Platzierungsfehler?
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CatPhotoApp</title>
</head>
<body>
  <main>
    <h1>CatPhotoApp</h1>
    
    <section>
      <h2>Cat Photos</h2>
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
      <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </section>
    
    <section>
      <h2>Cat Lists</h2>
      
      <h3>Things cats love:</h3>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
        <figcaption>Cats <em>love</em> lasagna.</figcaption>
      </figure>
      
      <h3>Top 3 things cats hate:</h3>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
        <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
      </figure>
    </section>
    <section>
      <h2>Cat Form</h2>
      <form action="https://freecatphotoapp.com/submit-cat-photo" method="post">
        <!-- Erstes fieldset -->
        <fieldset>
          <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input type="radio" name="indoor-outdoor" id="indoor" value="indoor"> Indoor</label>
          <label><input type="radio" name="outdoor-indoor" id="outdoor" value="outdoor"> Outdoor</label>
        </fieldset>
        <fieldset> 
          <!-- Direkt unter dem legend-Tag können weitere Inhalte hinzugefügt werden -->
          <legend>Additional Information</legend>
          
          <label for="catName">Cat's Name:</label>
          <input type="text" id="catName" name="catName" placeholder="Enter your cat's name" required>
          <label for="catAge">Cat's Age:</label>
          <input type="number" id="catAge" name="catAge" placeholder="Enter your cat's age" required>
          <label for="catColor">Cat's Color:</label>
          <input type="text" id="catColor" name="catColor" placeholder="Enter your cat's color" required>
          <label for="catPhotoURL">Cat's Photo URL:</label>
          <input type="text" id="catPhotoURL" name="catPhotoURL" placeholder="Enter cat photo URL" required>
          <button type="submit">Submit</button>
       
</fieldset>
      </form>
    </section>
  </main>
</body>
</html>

Könntet ihr mir bitte helfen das <fieldset> richtig zu platzieren.

HTML, Webseite, Webdesign, Frontend
1 Antwort

Meistgelesene Fragen zum Thema HTML
Mehr meistgelesene Fragen zu HTML