HTML Formular gestalten mit CSS für Anfänger
Вставка
- Опубліковано 23 лип 2024
- HTML Formular gestalten mit CSS für Anfänger. In diesem Tutorial zeige ich dir wie du ein HTML Formular mit CSS gestalten kannst. Anfangen von Labels, Input Feldern, Checkboxen und Select Boxen ist einiges mit dabei. Happy Coding!
Link aus dem Video:
↪︎ oinam.github.io/entities/
⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung
00:23 HTML Formular
02:32 Allgemeines CSS
04:38 Label
07:16 Input Felder
10:40 Checkbox
14:22 Buttons
19:28 Select Box
32:32 Wie gehts weiter
⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Wichtige HTML Tags du DU lernen solltest:
↪︎ • Wichtige HTML Tags die...
5 HTML Tags die kaum einer kennt:
↪︎ • Seltene HTML Tags die ...
CSS Media Queries für Anfänger:
↪︎ • CSS Media Queries Deut...
📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit vielen Jahren beruflich als Web Entwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.
Starte Jetzt!
/ @programmierenmario
#HTML #Formular #ProgrammierenM
Da ich während der Ausbildung nicht ausgebildet wurde und auch vom amt kein Bootcamp erhalte muss ich mir alles eigenständig aneignen, da seit monate nur Absagen kommen mangels Praxisnaher Erfahrung.
Da bin ich auf dein Kanal gestoßen was wirklich Gold Wert ist.
Das alles kostenlos anzubieten verdient größten Respekt danke dafür.
Hätte ich während meiner Ausbildung nur einen Ausbilder/ Mentor wie dich dann wäre ich jetzt viel weiter 😅
Ja leider kann man sich Heute nicht mehr so ganz aufs Bildungssystem verlassen. Es gibt natürlich Ausnahmen wenn man Glück hat. Ich kann dir nur den Rat geben in deiner Freizeit ein Projekt umzusetzen was du vorzeigen kannst. Ein Thema (Projekt) wofür du brennst. Von dem du gerne erzählst. Wo du dranbleibst und zeigen kannst wie du es umgesetzt hast, welche Probleme du bei der Umsetzung hattest und wie du diese Probleme lösen konntest. Das ist sehr viel Wert und dürfte deine Chancen deutlich steigern. Zumindest habe ich damit persönlich gute Erfahrungen gemacht. Wünsche dir viel Glück und Erfolg auf deinem Weg.
Hey Mario, sehr gutes Tutorial! Die Tips zu "select" haben mir total viel Neues gezeigt. Danke auch für die Hinweise auf die Probleme mit den Browsern: das hilft sehr!
Freut mich das ich dir helfen konnte ✌️
Super! Ruhig und sachlich. TOP! 😗
Herzlichen Dank für dein Feedback ✌️
Wie immer ruhig und fundiert erklärt!
Weiter so!
Herzlichen Dank ✌️🙂
Du hast es super erklärt ich habe so viel dazu gelernt.
Danke für das Lob!
Danke fürs Video 😊
Kein Problem 😊
Super
Vielen Dank.
Super erklärt, weiter so👍
Vielen Dank ✌🙂
super erklärt
Vielen Dank ✌️🙂
✌️🙂
Echt super Videos! Perfekt wäre es wenn du in dem Video auf etwas aufbaust (index.html) die zur Ansicht stellst, es war echt mühsam die aus dem Video abzuschreiben ;-)
Hallo Jörg, vielen Dank für dein Feedback. Tut mir leid das du Mehraufwand hattest.
@@ProgrammierenMario es sollte eine Anregung und keine Kritik sein!
@@JeahBee66 Hab ich schon verstanden ^^ Kein Problem 🙂
Danke Mario, das war wieder sehr gut. Was mir fehlt und was Du schon angesprochen hast, ist das Validieren der Formularinhalte, aber auch das Versenden an eine E-Mailadresse. Hast Du da schon was gemacht oder kommt da noch was?
Bzgl Formulare verarbeiten kann ich dieses Video empfehlen --> ua-cam.com/video/uOE1aqyzq_w/v-deo.html
Da wird zwar keine E-Mail versendet, aber es gibt ein Dateiupload.
Zumindest wäre dieses Video der nächste Schritt bevor Serverseitig eine Email versendet werden könnte.
@@ProgrammierenMario ❤
Hey Mario, wieder etwas bei dir gelernt, vorallem < und: firstchild war völlig neu für mich. Hast du bei dir schon ein Toturial wie man CookieBanner macht bzw Cookies setzt. Ich versteh bei dir so vieles, vielleicht würde das mit den Cookies auch endlich mal klappen. Das ist bei mir noch so ein schwarzer Fleck in der Thematik um JavaScript
Freut mich das dir das Tutorial gefallen hat. Ein Video über Cookies habe ich derzeit noch nicht. Setze ich sehr gerne mit auf die Liste. ✌️
Ein Umfrageformular mit Auswertung wäre Cool!
Sehr schöne Idee :)
Hey Mario, wie. Immer danke für diese coolen und hilfreichen Videos, was mir in soviele tutorials bislang bei vielen fehlt, Formular erstellen ist recht leicht möglich, aber wie ist es mit dem versenden von dem Formular mit ner Mail? Gibt es da. Anbieter die man via API a anbindet oder wie handhabt man es am besten?
Ja da gibt es viele verschiedene Möglichkeiten. Wie du schon geschrieben hast über eine API oder du machst es selbst über ein eigenes Backend. Das kann dann auch ein einfaches Script sein welches einfach nur die Daten entgegen nimmt und weiterverarbeitet ;)
Aber wie du es im Detail machen kannst kann ich so nicht beantworten, dazu müsste ich mal ein Tutorial machen^^
@@ProgrammierenMario ja, danke für die Antwort... Ein eigenes tutorial klingt irgendwie interessant. Es würde zumindest alles. Komplettieren
ma ne Frage: bei dir im Editor werden (z.B. das select NACH .form-box) in anderer Farbe oder manches auch kursiv angezeigt. Wo kann man diese Codeformatierungen einstellen im Visual Code Editor? Danke für Deine Hilfe
Hi, das könnte am Theme liegen welches ich verwende. Suche mal bei den Extension nach "Ayu".
Das kannste ja mal testen :)
@@ProgrammierenMario Dankeschön, das ist es 🙂
Hallo Mario, vielen Dank für das tolle und lehrreiche Video! Wäre es möglich, dass du einen Download-Link für den Quellcode (allgemein bei deinen Videos) machen könntest, wäre auch hilfreich bei einer Fehlersuche. Hast du bereits oder wirst du noch Videos betreffend Formularvalidierung bzw. Versand der Daten erstellen? Gruss, Peter
Hallo Peter, generell für alle Tutorials hatte ich das nicht vor. Es macht auch nicht immer für jedes Thema sinn. Würde es eher auf Anfrage machen. Brauchst du zu diesem Tutorial den Quellcode? Für die Tutorials wo ich es schon gemacht habe, findest du es auf meinem GitHub Account --> github.com/ProgrammierenM
Wir kann man dann bei dem Select Box Element die einzelnen Auswahlelemente formatieren, so das es auf jedem Browser gleich aussieht.
Ist leider nicht so einfach um es über einen Kommentar zu erklären. Die Browser sind da etwas restriktiv. Auch zwischen den Endgeräten verhalten sich die Selectboxen anders, z.B. auf mobile Browser geht unter der Box nichts auf, sondern es wird ein Overlay geöffnet wo man alle Optionen wählen kann. Dies wäre ein Thema für ein eigenständiges Tutorial ;)
Hey, wieder ein schönes Video.
Hast Du auch ein Tipp, wie man diese Kontaktdaten dann per mail an sich selbst sendet?
Bspw. über ein vorhandenen gmail Konto?
Benötigt man dazu einen Hosting Provider, oder gehts auch anders?
Ich persönlich würde geren erste Webseiten Schritte mit meinem Synology DS220+ machen. Hier kann ich ja webseiten hosten.
Gibts hier ne Möglichkeit entsprechende Daten via Mail zu versenden?
Viele Grüße
Ja es gibt verschiedene Möglichkeiten dies zu machen. Ich notiere es mir mal als weitere Videoidee 😉
Ja so ein Video wäre nicht schlecht 🙂
wie kann ich meine angegebenen daten vom kunden zu meinem server schicken lassen so dass ich sie abrufen und sehen kann?
Rettet mir meinen IT Test
Super 👍
Ich würde gerne input Felder nebeneinander haben und das Label drüber. Aber klappt nicht.
Um Elemente zu positionieren kannst du in CSS z.B das Flexbox System verwenden. Hatte dazu ebenfalls ein Video gemacht. ✌️
@@ProgrammierenMario super das werde ich mir anschauen. Danke
wann benutzt man Position absolute und relative. Ich verstehe das nicht, das ist doch nicht responsive, also klingt nicht modern.
Die Positionierung hat erstmal an sich nichts mit Responsive Webdesign zu tun. Mit CSS Position kann erstmal Grundlegend ein Element frei positioniert werden. Und da hast du einfach mit absolute oder relative usw. mehrere Möglichkeiten. Je nach dem nach welchem Element es sich richten soll. bzw. von welchem Element es sich ausgehend positionieren soll.
Und danach mit PHP auch eine Funktion geben.😊
Oder bei dir mit Python, falls ich mir das richtig gemerkt habe. 😅
@@ProgrammierenMario denke PHP ist in dem Fall sinnvoller.🤔 ich lass mich einfach mal überraschen.😊 das validieren ist ja auch schon im html möglich… auch da lass ich mich mal überraschen.😅
@@birdy1 php mail würde ich nich empfehlen(weil sendmail nicht so zuverläsig ist wie smtp) und auch die validierung im HTML nicht, es ist zu einfach ein post request zu faken ohne das formular überhaupt zu nutzen :D
@@VitalijMik ich mache mir mehr Gedanken über die DSVGO. Da habe ich schon genug mit zu tun. Produktiv würde ich meine Programmierung überhaupt nicht einsetzen. Das ist mehr so für Spaß und Lust am coden.😊
Ich guck nur die Videos wegen dem Dialekt :D mir ist das thema egal. Verstehe auch nicht wieso in Sachsen in Hotels hochdeutsch gesprochen wird ich fahre doch nicht in die Sächsische Schwiez nur um hochdeutsch zu hören :P
Da ich hier nicht in Hotels gehe, kann ich das leider nicht beurteilen. Alles andere klingt hier wie gewohnt sächsisch. Egal ob an der Kasse oder in der Eisdiele. Sogar die Bäume schwingen hier im sächsischen Rhythmus. Auch der Dönermann von nebenan hört sich mittlerweile sächsisch an xD
@@ProgrammierenMario ich war in Bad Schandau und ich kann sagen da wird kaum Sächsisch gesprochen ;)
War schon lange nicht mehr dort 🤷♂️