HTML – die neusten Beiträge

Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Wie in der Langen Frage geschrieben, ich suche Code der es mir ermöglicht über Java Skript oder PHP auszuwerten welche Checkbox geklickt wurde.

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="frei" align="center"><strong> Abteilung FF </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="workS" align="center"><strong> Abteilung W </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="MO" align="center"><strong> Abteilung O </strong></label><br>

Im allgemeinen Nutze ich bereits die Funktion in JS damit der User nur ein Element auswählen kann. Doch nun bräuchte ich eine Direkte Ausgabe je nachdem welches Element ausgewählt wurde. D.h. Ich suche eine Möglichkeit auszuwerten welches angeklickt wurde und dann möchte ich etwas ausführen über if, eles if, else.

Falls es helfen sollte hier habe ich die Begrenzung Methode für das anklicken.

   //Dieser Code überprüft ob drei Elemente ausgewählt wurden. Wenn dies der fall ist dann werden alle weiteren Element Blockiert.

   const groups = [...document.getElementsByClassName("radio-multichoice")].reduce((result, element) => {

 result[element.name] = result[element.name] || [];

 result[element.name].push(element);

 return result;

}, {});

for (const [name, elements] of Object.entries(groups)) {

 const limit = name.split(":")[name.split(":").length-1];

 for(const el of elements) {

  el.addEventListener("change", e => {

   if (elements.filter(x => x.checked).length > limit) {

     e.target.checked = false;

   }

  });

 }

}

Könnte mir dabei jemand Helfen, falls ihr nachfragen habt weil ich es mal wieder nicht richtig erklären konnte stellt bitte eine Nachfrage.

Computer, HTML, Webseite, programmieren, JavaScript, PHP, Webentwicklung

CSS Grid Webseite funktioniert nicht?

Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    h h h h h h
    c c c c c s
    c c c c c s
    c c c c c s
    c c c c c s
    f f f f f s
}

.footer {
  grid-area: f;
}

.header {
  grid-area: h;
}

.content {
  grid-area: c;
}

.side {
  grid-area: s;
}

HTML-Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <nav>
</head>
<body class="container">
  <title>Eigene Webseite von ---</title>
  <header class="header">
    <h1>Hauptseite meiner Webseite</h1>
  </header>
  <main class="content">
    <div id="abstand">
      <h3>Interessen:</h3>
      <ul>
        <li>Technik</li>
        <li>Videospiele</li>
      </ul>
      <u><h3>Ich bin:</h3></u>
      <p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
      <a id="link" href="https://www.netflix.com/at/">Mein Link</a>
      <div>
        <div id="bild">
          <img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
        </div>
      </div>
      <div id="Motte"></div>
    </div>
  </main>
  <aside class="side">
    <p>News/Einträge</p>
  </aside>
  <div class="daten">
    <footer class=footer>
      <h4>Hier könnte ein Motto stehen</h4>
    </footer>
    <div id="daten">
      <p>---</p>
      <p>--</p>
      <a href="----</a>
    </div>
  </div>
</div>
</nav>
</body>
</html>
HTML, CSS

Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.

HTML, Programmierer, programmieren, CSS, Programmiersprache, Webdesign, Visual Studio Code

Wie kann ich Zeilenumbrüche in einer E-Mail einfügen (PHP)?

Hallo,

ich habe mit HTML und PHP ein Kontaktformular erstellt, welches mir per E-Mail zugesendet wird.

Die einzelnen Felder in der E-Mail werden aber einfach hintereinander weg geschrieben und ich möchte Absätze nach jedem Feld einfügen, damit die E-Mail etwas schöner aussieht.

Hier der Code:

if (isset($_POST["submit"])) {
  mail("email-adresse", "Kontaktformular", 'Firma: '.$_POST["Firma"].'Branche: '.$_POST["Branche"].'Anrede: '.$_POST["Anrede"].
  'Name: '.$_POST["Name"].'Straße: '.$_POST["Straße"].'PLZ, Ort: '.$_POST["PLZ,Ort"].'Telefon: '.$_POST["Telefon"].'E-Mail: '.$_POST["E-Mail"].'Anmerkung: '.$_POST["Anmerkung"]);
?>
<h1 class="erfolg">Danke für Ihre Anfrage!</h1>
<?php
  }
?>
<form action="Kontakt.php" method="post">
  <legend>Kontaktformular</legend>
  <br>
  <!-- Titel für Eingabefelder -->
  <p>
    <label>Firma</label><br>
    <input type="text" name="Firma">
  </p>
  <p>
    <label>Branche</label><br>
    <input type="text" name="Branche">
  </p>
  <p>
    <label for="Anrede">Anrede*</label><br>
    <select name="Anrede" required>
      <option></option>
      <option>männlich</option>
      <option>weiblich</option>
      <option>divers</option>
    </select>
  </p>
  <p>
    <label>Name*</label><br>
    <input type="text" name="Name" required placeholder="">
  </p>
  <p>
    <label>Straße</label><br>
    <input type="text" name="Straße">
  </p>
  <p>
    <label>PLZ, Ort</label><br>
    <input type="text" name="PLZ, Ort">
  </p>
  <p>
    <label>Telefon</label><br>
    <input type="text" name="Telefon">
  </p>
  <p>
    <label>E-Mail*</label><br>
    <input type="email" name="E-Mail" required>
  </p>
  <p>
    <label>Anmerkung</label><br>
    <textarea rows="10" name="Anmerkung" placeholder=".">
    </textarea>
  </p>
  <p>
    <button type="submit" name="submit"><a>Versenden!</a></button>
  </p>
</form>
E-Mail, HTML, IT, Webseite, programmieren, PHP

Einzelne Schriften in HTML Bearbeiten?

Hallo,

ich habe vor kurzem begonnen eine Website mit HTML zu programmieren, dazu nutze ich Visual Studio Code, aber ich mache das ganz noch nicht so lange, also kenne ich mich noch nicht so gut aus. Zurzeit versuche ich eine Tabelle mit verschiedenen Raritäten zu erstellen. Dazu soll z.B. "Rare" einen blauen Rahmen bekommen, so ähnlich wie in Bild 1 zusehen.

Ich habe schon versucht es zu schaffen, dennoch habe ich bisher nur hinbekommen um alles einen Rahmen zu kreieren.

Meine Frage ist nun, wie man das individuell anpassen kann. So brauche ich die Rahmen nur bei den Namen der Raritäten und diese sollen jeweils eine eigene Farbe haben (z.B. "Rare" = blau, "Epic" = Violett usw.). Außerdem soll der Rahmen genau passen. So ist es bei mir oben so, dass es für "Uncommon" passt, aber für "Epic" viel zu groß ist. Meine Skills in HTML reichen bisher nur die Rahmen für alle zu machen. Ich habe den Style so gemacht:

CSS:

table tr td
{
  font-size: 1.2em;
  background: #fff;
  color: black;
  border-radius: 20px;
  padding: 4px 10px;
}

Vermutlich nicht besonders gut, aber da hoffe ich auf eure Hilfe 😅 Falls es euch etwas hilft, schreib' ich hier noch ein Beispiel hin, wie ich die Tabelle gemacht habe (das Richtige ist natürlich länger)

HTML:

<table>
  <thead>
    <tr>
      <th>Eyes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td>
      <td>23.99%</td>
      <td>Common</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
Bild zum Beitrag
Computer, HTML, programmieren, CSS, Webdesign, Visual Studio Code

Footer Hintergrundfarbe ändert sich nicht?

Hallo,

ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.

Ich zweifle gerade ziemlich an mir selbst.

HTML:

<footer>   
        <section class="section_footer">
        <div class="social">
            <a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="Impressum.html">Impressum</a></li>
            <li><a href="datenschutz.html">Datenschutz</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="credits.html">Credits</a></li>
        </ul>
        <p class="footer_text">
            Lorem Ipsum
        </p>
        <p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
    </section>
    </footer>

CSS:

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    background-color: whitesmoke;
}
.section_footer {
    padding: 40px 0px;
}
.social {
    text-align: center;
    padding-bottom: 25px;
    color:gray;
    display: flex;
    justify-content: space-between;
    padding: 0 850px;
    font-size: 50px;
}
.social a {
    font-size: 25px;
    color: inherit;
    width: 40px;
    height: 40px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    margin: 0 8px;
    opacity: 0.75;
}
.social a:hover {
    opacity: 0.9;
}
footer ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
footer ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
footer ul li {
    display: inline-block;
    padding: 0 15px;
}
footer ul li a:hover {
    opacity: 1;
}
footer section p {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    color: #aaa;
}
footer  a i {
    display: flex;
    justify-content: center;
    align-items: center;
}

Danke im Vorraus!

Computer, HTML, CSS, Webentwicklung

Meistgelesene Beiträge zum Thema HTML