Drei Scrips auf eine Seite unterbringen

Diskutiere Drei Scrips auf eine Seite unterbringen im HTML Forum im Bereich Programmierung; Hallo im Forum, bin hier am Start und hoffe meine Begriffstutzigkeit in sequenzieller Logik aufzufrischen. Ich versuche mich in HTML, JavaScript...
Neues Thema erstellen Antworten
  • Drei Scrips auf eine Seite unterbringen Beitrag #1
P
pentilisea
New member
Beiträge
1
Punkte Reaktionen
0
Hallo im Forum,
bin hier am Start und hoffe meine Begriffstutzigkeit in sequenzieller Logik aufzufrischen.

Ich versuche mich in HTML, JavaScript und PHP aber komme nicht weiter eine Seite in drei Sektoren/Boxen oder Fieldsets oder Forms aufzuteilen.

Ich benutze auch Bootstrap, aber Bootstrap zerstört jedesmal meine sorgsam aufgebaute Form.

Die erste Form ist "Playground", siehe Screenshot. (HTML)
Die zweite Form ist "Your Numbers" (HTML + JavaScript)
An der dritten arbeite ich noch ....

Nun würde ich gerne beide Formen nebeneinander auf einer Seite sehen.
Code anbei....
und würde mich freuen wenn Ihr mir ein wenig auf die Sprünge helft.

Screenshot PLAYGROUND 2023-07-25 12-12-53.png
<!DOCTYPE html>
<html>

<head>
<title>
Playground
</title>

<style>
fieldset

{
background-color: #eeeeee;
}

{
background-color: gray;
color: white;
padding: 5px 10px;
}

input {
margin: 5px;
}

</style>

<body>

<input type="file" >

<br>

<!-- Form Name -->
<form>
<fieldset>

<p>
<label style="color: green"for="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ZERO&nbsp;&nbsp;&nbsp;</label>
<input id="0" type="text" style="text-align: center; font-size:14pt; color: green;" size="1" maxlength="3" >
<p>
<label style="color: red"for="1">&nbsp;&nbsp;1</label>
<input id="1" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="2">&nbsp;&nbsp;2</label>
<input id="2" type="text" style="text-align: center; font-size:14pt;" size="1" maxlength="3" >

<label style="color: red"for="3">&nbsp;&nbsp;3</label>
<input id="3" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>

<label for="4">&nbsp;&nbsp;4</label>
<input id="4" type="text" style="text-align: center; font-size:14pt;" size="1" maxlength="3" >

<label style="color: red"for="5">&nbsp;&nbsp;5</label>
<input id="5" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="6">&nbsp;&nbsp;6</label>
<input id="6" type="text" style="text-align: center; font-size:14pt;" size="1" maxlength="3" >
<p>

<label style="color: red"for="7">&nbsp;&nbsp;7</label>
<input id="7" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="8">&nbsp;&nbsp;8</label>
<input id="8" type="text" style="text-align: center; font-size:14pt;" size="1" maxlength="3" >

<label style="color: red"for="9">&nbsp;&nbsp;9</label>
<input id="9" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>

<label for="10">10</label>
<input id="10" type="text" style="text-align: center; font-size:14pt;" size="1" maxlength="3" >

<label for="11">11</label>
<input id="11" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label style="color: red"for="12">12</label>
<input id="12" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>
<p><br>
<label for="13 ">13</label>
<input id="13" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label style="color: red"for="14">14 </label>
<input id="14" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="15">15 </label>
<input id="15" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >
<p>

<label style="color: red"for="16">16 </label>
<input id="16" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="17">17 </label>
<input id="17" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label style="color: red"for="18">18 </label>
<input id="18" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>

<label style="color: red"for="19">19 </label>
<input id="19" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="20">20 </label>
<input id="20" type="text" style="text-align: center; font-size:14pt;" size="1" maxlength="3" >

<label style="color: red"for="21">21 </label>
<input id="21" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>

<label for="22">22 </label>
<input id="22" type="text" style="text-align: center; font-size:14pt;" size="1" maxlength="3" >

<label style="color: red"for="23">23 </label>
<input id="23" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="24">24 </label>
<input id="24" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >
<p>
<p><br>
<label style="color: red"for="25 ">25</label>
<input id="25" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >

<label for="26">26 </label>
<input id="26" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label style="color: red"for="27">27 </label>
<input id="27" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>

<label for="28">28 </label>
<input id="28" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label for="29">29 </label>
<input id="29" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label style="color: red"for="30">30 </label>
<input id="30" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>

<label for="31">31 </label>
<input id="31" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label style="color: red"for="32">32 </label>
<input id="32" type="text" style="text-align: center; font-size:14pt; color: red" size="1" maxlength="3" >

<label for="33">33 </label>
<input id="33" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >
<p>

<label style="color: red"for="34">34 </label>
<input id="34" type="text" style="text-align: center; font-size:14pt; color: red" size="1" maxlength="3" >

<label for="35">35 </label>
<input id="35" type="text" style="text-align: center; font-size:14pt; color: black;" size="1" maxlength="3" >

<label style="color: red"for="36">36 </label>
<input id="36" type="text" style="text-align: center; font-size:14pt; color: red;" size="1" maxlength="3" >
<p>

<input type="reset" value="Clear"
style="background-color: red; color: white" />
<input type="submit" value="Submit" style="background-color: green; color: white" />






</fieldset>

</form>


Der Zweite Screenshot: Den Code einzufügen erspare ich mir, da ich nicht weiss wie man das hier richtig macht ...

Screenshot NUMBERS-2 2023-07-25 12-33-13.png
 
Anhänge
  • Screenshot NUMBERS 2023-07-25 12-13-59.png
    Screenshot NUMBERS 2023-07-25 12-13-59.png
    25,7 KB · Aufrufe: 2
Zuletzt bearbeitet:
  • Drei Scrips auf eine Seite unterbringen Beitrag #2
S
scatello
Well-known member
Beiträge
528
Punkte Reaktionen
44
Da sind einige Macken drin.
Ich benutze auch Bootstrap
Zum Vergrößern anklicken....
Warum? Sieh dir mal Flexbox und Grid an, damit bekommst du das besser hin.
Deine &nbsp; Orgien sind schlimm, nutze CSS um Abstände zu erzeugen.
Verwende nach Möglichkeit kein CSS inline, sondern nutze eine eigene CSS-Datei
ID's sollten nicht nur aus Zahlen bestehen. Technisch gesehen kann der Wert für ein id-Attribut jedes beliebige Zeichen enthalten, mit Ausnahme von Leerzeichen. Um jedoch unbeabsichtigte Fehler zu vermeiden, sollten nur ASCII-Buchstaben, Ziffern, "_" und "-" verwendet werden, und der Wert für ein id-Attribut sollte mit einem Buchstaben beginnen.
 
Thema:

Drei Scrips auf eine Seite unterbringen

Oben Unten