HTML Schöner / Moderner machen?

Hey!
Ich habe 2 HTML Seiten.

Eine, für den Input und eine für den Output.

Input:

Output:

Wie kann ich das etwas schöner/moderner machen?

Mein HTML Code (input):

<!DOCTYPE html>
    <html lang="en">


    <head>
        <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet" >
        <script src="{{ url_for('static', filename='script.js') }}"></script>
        <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>Solver</title>
    </head>


    <body>
        <h1>Solver v0.1</h1>
        
        <!-- Sources -->
        <form id="dataform" action="/" method="POST">
            <textarea name="customercsv" id="customercsv" cols="40" rows="10"></textarea>


            <br><label for="KM_cost_truck_a">KM cost truck a</label>
            <input required placeholder="10" type="text" id="KM_cost_truck_a" name="KM_cost_truck_a"><br>
    
            <label for="KM_cost_truck_b">KM cost truck b</label>
            <input required placeholder="9" type="text" id="KM_cost_truck_b" name="KM_cost_truck_b"><br>
    
            <label for="Product_cost_a">Product cost a</label>
            <input required placeholder="7" type="text" id="Product_cost_a" name="Product_cost_a"><br>
    
            <label for="Product_cost_b">Product cost b</label>
            <input required placeholder="11" type="text" id="Product_cost_b" name="Product_cost_b"><br>
    
            <label for="Source_a_location">Source a location</label>
            <input required placeholder="Berlin" type="text" id="Source_a_location" name="Source_a_location"><br>
    
            <label for="Source_b_location">Source b location</label>
            <input required placeholder="Paris" type="text" id="Source_b_location" name="Source_b_location"><br>
    
            <label for="Truck_a_capacity">Source a capacity</label>
            <input required placeholder="5" type="text" id="Truck_a_capacity" name="Truck_a_capacity"><br>
    
            <label for="Truck_b_capacity">Source b capacity</label>
            <input required placeholder="3" type="text" id="Truck_b_capacity" name="Truck_b_capacity"><br>


            <label for="Truck_a_fixedcosts">Source a truck fixed costs</label>
            <input required placeholder="3" type="text" id="Truck_a_fixedcosts" name="Truck_a_fixedcosts"><br>


            <label for="Truck_b_fixedcosts">Source b truck fixed costs</label>
            <input required placeholder="3" type="text" id="Truck_b_fixedcosts" name="Truck_b_fixedcosts"><br>


            <button type="submit" id="calcbtn" value="Submit">Calculate</button>
        </form>
    </body>
</html>

Output:

<!DOCTYPE html>
    <html lang="en">


    <head>
        <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet" >
        <script src="{{ url_for('static', filename='script.js') }}"></script>
        <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>Solver</title>
    </head>


    <body>
        <h1>Solver v0.1</h1>
        {{ response | safe }}
    </body>
</html>
HTML Schöner / Moderner machen?
HTML, CSS, Webdesign, Webdevelopment
Wie erstelle ich ein dynamisches Kontaktformular?

Hallo, also ich habe bereits ein Kontaktformular erstellt das auch soweit gut funktioniert hierzu mein bisheriger Code:

    <?php
    if(isset($_POST["submit"])){
      mail("email@mail.com", "Kontaktformualr", 'Vorname: '.$_POST["vorname"].'Nachname: '.$_POST["nachname"].' Email: '.$_POST["email"].' Betreff: '.$_POST["subject"].' Nachricht: '.$_POST["message"]);
      ?>
      <h1 style="color: green;">Das Kontaktformular wurde abgesendet!</h1>
      <?php
    }
    ?>


    <form action="contact.php" method="post" class="service-contact-form">
      <input class="service-input-field" type="text" name="vorname" placeholder="Vorname*" required="required"><br>
      <input class="service-input-field" type="text" name="nachname" placeholder="Nachname*" required="required"><br>
      <input class="service-input-field" type="email" name="email" placeholder="Email*" required="required"><br>
      <input class="service-input-field" type="text" name="subject" placeholder="Betreff"><br>
      <textarea class="service-textarea-field" name="message" rows="8" cols="80" placeholder="Nachricht*" required="required"></textarea><br>
      <button class="service-contact-form-button" type="submit" name="submit">Senden</button>
    </form>

Das ist jetzt das normale Kontaktformular, allerdings würde ich gerne unterschiedliche Kontaktformulare mit einem <select> Element auswählen können.

    <div class="service-contact-form-select">
      <select>
        <option value="0">Support Anfrage</option>
        <option value="1">Bestellung</option>
      </select>
    </div>

Denn ich brauche bei der Supportanfrage wesentlich weniger Informationen wie bei dem Bestellformular.

Also was soll passieren?

Wenn ich bei <select> value="0" habe soll das Formular wie oben beschrieben aussehen.

Wenn ich aber bei <select> value="1" habe soll das Kontaktformular um weitere Elemente erweitert werden deren Informationen dann auch via php an meine e-mail übermittelt werden.

Kann mir hier jemand weiterhelfen?

Computer, Internet, HTML, Programmieren, CSS, PHP, Webdesign, Webentwicklung, Webdesign und Entwicklung
Warum sind viele Webseiten so schlecht programmiert?

Es gibt was dieses Thema angeht verschiedene Aspekte zu berücksichtigen, die ich gerne unterscheiden möchte. Manche Sachen sind einfach geschmackssache, wie zum Beispiel das Layout, das allgemeine Design, die Schrift, die Farben und solche Sachen.

Darauf will ich aber überhaupt nicht hinaus. Was ich meine sind tatsächliche Mängel was die reine Funktionalität angeht und die Benutzerfreundlichkeit. Schlechte Search-Engine, tote Links, redundante Benienelemente, stark veraltete oder fehlerhafte Informationen zu Events und Produkten, überflüssige Metadaten usw, also allgemein gesagt Dinge, die Besucher bei der optimalen Navigation und Benutzung der Seite verwirren, ausbremsen und behindern.

Natürlich ist ein wichtiger Punkt die Finanzierung, denn ordentliches Webdesign kostet Kohle. Aber gerade kommerziell genutze Webseiten von mittelständischen und auch großen Unternehmen, wo das Geld dafür eigentlich da sein sollte, stechen mit groben Mängeln verschiedenster Art immer wieder ins Auge, obwohl ich nicht einmal aktiv danach suche. (Wer weiß was man bei genauerem Hinsehen für Schabernack finden würde)

Mir ist es ein Rätsel, wie das sein kann. Wenn mal hier und da eine Kleinigkeit nicht stimmt geschenkt, aber bei so mancher Website möchte man sich ja am liebsten über seine Tastatur übergeben, weil alleine die Navigation der pure Pain ist. Wie kommt es, dass darauf offensichtlich so wenig wert gelegt wird? Alleine Marketing-technisch ist ein mieserabler Internet-Auftritt doch eigentlich schon eine mittelschwere Katastrophe.

Ich habe da so meine Theorien, würde aber gerne eure Meinung dazu hören und ob ihr auch manchmal diesen Eindruck gewinnt.

Betriebswirtschaft, Webdesign
Meine Webseite mit ausländischen Browser und ID testen wie?

Hallo zusammen ich brauch mal eure Hilfe. Ich arbeite schon seit langem an meiner internationalen Webseite. Nun würde ich gerne testen ob auch alles so funktioniert wie es funktionieren soll. Also wenn Leute aus Niederlande kommen oder aus Spanien, Frankreich und so weiter ob alles auch so funktioniert wie es funktionieren soll. Leider kriege ich egal was ich mache die Seite immer nur auf Deutsch angezeigt weil mein Standort Deutschland ist und mein Browser vermutlich. Ich habe auch schon versucht meinen Browser Standort zu ändern bei Google auf Italienisch zum Beispiel und ich bekomme trotzdem deutsch angezeigt. Habe auch versucht solche Zeiten zu nutzen mit denen man angeblich mit einer amerikanischen IP Adresse seine Seite aufrufen kann so genannte Proxy Seiten. Leider funktioniert das nur begrenzt. Denn mein Ziel ist es zum Beispiel den Kaufvorgang zu testen ob auch die Integration des Zahlungsdienstleisters Stripe automatisch übersetzt wird. Aber das funktioniert mit diesen Seiten leider nicht. Hat jemand eine Ahnung wie ich das testen kann?

aktuell habe ich nämlich das Problem dass ich eine englischsprachige Jim Do Seite habe komplett auf Englisch aber bei Kreditkartenzahlung steht alles auf Deutsch und Jimdo hat gesagt es liegt nicht an Ihnen. Der Anbieter Stripe gibt leider keine Antwort auf E-Mails und in der Hilfe konnte ich lesen dass dort 13 Sprachen unterstützt werden aber wie, wo man etwas ändern kann steht nirgendwo also gehe ich davon aus dass es vielleicht automatisch funktioniert. Nur weiß ich jetzt nicht wie ich meine Seite testen kann

Homepage, Webseite, Programmieren, Jimdo, Strip, Webdesign, kreditkartenzahlung
scroll animation mit javascript?
 window.onscroll = function() {scrollFunction()};
                
                function scrollFunction() {
                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("pic").style.marginTop = "0px";
                    document.getElementById("pic").style.marginLeft = "900px";
                    document.getElementById("pic").style.width = "100px";
                    document.getElementById("pic").style.height = "100px";
                    document.getElementById("h1").style.width = "1003px";
                    document.getElementById("h1").style.height = "60px";
                    document.getElementById("h1").style.marginTop = "0px";
                    document.getElementById("h1").style.textAlign = "center";
                  } else {
                    document.getElementById("pic").style.marginTop = "110px";
                    document.getElementById("pic").style.marginLeft = "800px";
                    document.getElementById("pic").style.width = "200px";
                    document.getElementById("pic").style.height = "200px";
                    document.getElementById("h1").style.width = "250px";
                    document.getElementById("h1").style.height = "50px";
                    document.getElementById("h1").style.marginTop = "195px";
                  }

 Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?

..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?

Sry, bin totaler Anfänger =)

Computer, HTML, Programmieren, CSS, JavaScript, Webdesign
Webdesigner oder Webentwickler werden?

Hallo, momentan bin ich noch Schülerin und so langsam muss ich mich entscheiden welchen Weg ich für meinen beruflichen Werdegang einschlagen will. Mich haben Computer schon immer fasziniert, hauptsächlich in Sachen Software und konnte mich immer freuen, wenn ich Menschen bei allgemeinen PC-Problemen helfen konnte. Aus diesem Grund habe ich mir lange vorgenommen in Richtung IT zu gehen. Am liebsten wäre es mir, wenn ich mich in dem Beruf ein wenig kreativ austoben könnte, da da nunmal, neben Ordnung/Struktur, meine größte Kompetenz liegt. Ich habe da z.B. an Webentwickler und/oder -designer gedacht, allerdings habe ich große Angst, dass mein logisches Denken, was ja ziemlich wichtig in Sachen Programmieren ist, nicht ausreichen wird (war in Mathe immer nur ein dreier-vierer Typ).

Zu Beginn der 10 Klasse im Gymn. hatte ich Informatik als normalen Grundkurs, wo wir viel mit Java gearbeitet haben. Hatte aber echt Probleme damit klarzukommen, weil es viel logischer zuging, wobei das früher mit HTML (vorher auf Realschule) leichter war.

Ich würde aber ganz gerne beides sein, Webentwickler UND Designer. Würdet ihr mir das raten, was ich mir wünsche, oder sollte ich mich aufgrund meiner Kompetenzen, doch nur auf Webdesigner begrenzen? (Wobei mir da die Sorge aufkommt, dass es ein etwas zu 'unsicherer' Job ist, was ja leider oft so mit kreativen Berufen ist)

Beruf, Schule, Informatik, Webdesign, Webentwicklung, Ausbildung und Studium, Beruf und Büro

Meistgelesene Fragen zum Thema Webdesign