Einzeliges Textfeld

Zitat von Carmen D

ich hab ein einzeiliges Textfeld. Im Eingabebereich möchte ich die Schriftgrösse verändern, größer machen...bekomme das nicht hin.

Dafür gibt es die CSS-Eigenschaft font-size. Der Wert large dürfte wahrscheinlich ausreichen. Ansonsten werden die anderen Möglichkeiten auf SelfHTML aufgelistet:
SELFHTML: Stylesheets / CSS-Eigenschaften / Schriftformatierung

Zitat von Carmen D

Wie kann ich den Abstand zwischen einer Checkbox und dem Namen der Box vergrößern?

Die CSS-Eigenschaft dafür nennt sich margin-right und erwartet als Wert eine Größenangabe.



Hier mal ein Beispiel der erforderlichen CSS-Regeln:

HTML-Code:

<style type="text/css">
input[type="text"] {font-size: large;}
input[type="checkbox"] {margin-right: 1em;}
</style>

Das ist aber nicht sauber gelöst und wird dir an anderer Stelle Schwierigkeiten bereiten.

"margin" ist ja dafür da Elemente auf deiner Seite mit Abstand zu einander zu versehen.

wenn ich mich richtig entsinne gehen die Werte im Uhrzeigersinn und fangen oben an:

margin: 10px 20px 10px 20px;

heißt also oben und unten 10px, Abstand, sowie rechts und links 20px

LG

Zitat von Carmen D

Wenn ich das oben als Stylsheet einfüge, ändert es aber nicht die Schriftgrösse im einzeiligen Textfeld!

Dafür gibt es ja den CSS-Selektor. Du musst die ganze Zeile einfügen und nicht nur die CSS-Eigenschaft. Der CSS-Selektor gibt an, dass dies nur auf input-Elemente anzuwenden ist, die einzeilige Eingabefelder sind.

Zitat von Carmen D

Schicke ich mir die gleiche Datei auf mein Ipad, dann ist kein Banner zu sehen.
Woran kann das liegen?

Das kann an vielen Dingen liegen. Kannst du mal die Datei hier hochladen (in einem ZIP-Archiv)? Dann kann ich sie mir mal anschauen.

Alternativ kannst du die Datei auch online validieren lassen, um zu sehen, ob es sich um ein gültiges XHTML-Dokument handelt:
The W3C Markup Validation Service
Wenn du Fehler in der Datei hast, dann wird sie eventuell falsch dargestellt.

Du zipst die Datei und klickst hier im Forum dann auf die Büroklammer:

So, da müssen einige Dinge geändert werden.

• Die Doctype-Deklaration darf nur ein einziges mal vorkommen und muss ganz am Anfang stehen.
• Es darf nur ein html- und ein body-Element geben.
• Einzeilige Textfelder haben den Typ text nicht 1.
• Diese Textfelder sollten zumindest einen Linie unten haben, damit man sie als solche erkennt. Ganz ohne Rahmen sind sie unsichtbar und niemand sieht sie.
• Wenn man nur eine von mehreren Möglichkeiten auswählen will, nimmt man Radioboxen und keine Checkboxen.
• Zur Gruppierung von Fragen gibt es das fieldset-Element.
• Zusätzlichen vertikalen Abstand fügt man per CSS ein und nicht mit zusätzlichen Zeilenumbrüchen.
• Alle XHTML-Regeln müssen eingehalten werden, ansonsten ist dies kein gültiges XHTML-Dokument und wird anders gerendert.

Bekommst du diese Änderungen alleine hin?

Zitat von Carmen D

Hört sich Alles übelst kompliziert an...

Wenn man sich alles mal einzeln anschaut, dann ist es gar nicht so kompliziert.

Zitat von Carmen D

Die Textfelder sollen auf ausdrücklichen Wunsch keine Linie haben...

Dann weiß doch niemand, dass man sie am Computer ausfüllen kann. Momentan sieht es nämlich so aus, als wäre dort einfach nichts.

Zitat von Carmen D

Die einzeiligen Textfelder kann ich denke ich selbst ausbessern...muss ja nur Text statt 1 reinschreiben oder?

Ein einzeiliges Eingabefeld sollte in deinem Fall so aussehen:

HTML-Code:

<input type="text" />

Zitat von Carmen D

Wieso kann ich keine Checkboxen nehmen?
Funktioniert doch auch...Kann man das nicht lassen?

Ja, kann man auch. Aber so kann man momentan Ja und Nein gleichzeitig ankreuzen, was ja total sinnlos ist.

Zitat von Carmen D

Den zusätzlichen Abstand brauche ich, um die Seite auf DIN A 4 zu begrenzen ...einen automatischen Seitenumbruch hab ich nicht hinbekommen...
Kannst mir da helfen?

Dafür gibt es die CSS-Eigenschaft page-break-after bzw. page-break-before. Damit kann man einen Seitenumbruch erzwingen. Denn momentan passt der Seitenumbruch nicht bei mir:

Zitat von Carmen D

Wieso zeigt es mir keine Fussnoten an?

Die Technik, wie man auf jeder Seite eine Kopf- und Fußzeile einbindet, wird z.B. hier erklärt:
css - HTML Print Header & Footer - Stack Overflow

Zitat von Carmen D

Glaub das krieg ich Alles nicht alleine hin...
[...]
Kannst mir helfen?
Ist halt viel verlangt....

Wichtig!
Soll das Formular denn überhaupt digital ausfüllbar sein? Oder soll es erst ausgedruckt werden und dann per Hand ausgefüllt werden? Wenn es per Hand ausgefüllt werden soll, dann könntest du das Formular auch in Microsoft Word erstellen und als XHTML-Datei exportieren. Damit kannst du dir die ganze "Programmierarbeit" sparen.

Zitat von Carmen D

von der Optik her soll es bei den Kontrollkästchen genauso aussehen...ein Kästchen zum Wählen und dann Text.
Das geht mit Radioboxen nicht oder?

Nein, ein Radiobutton sieht anders aus als eine Checkbox. Dabei handelt es sich ja auch um zwei verschiedene Dinge.

Zitat von Carmen D

Bei Radiobuttons kann auch immer nur eine Möglichkeit, aber nicht mehrere gleichzeitig ausgewählt werden...Stimmts?

Ja, das stimmt.

Zitat von Carmen D

Stimmt...aber das macht ja kein normaler Mensch, dass er Ja und nein gleichzeitig ankreuzt...wie gesagt die Optik ist so gewünscht. Damit kann ich keine Radioboxen nehmen...
Hab ich das richtig verstanden?

Ja, da kannst du nur Checkboxen nehmen.

Zitat von Carmen D

Könntest mir wegen dem Zeilenumbruch helfen, dass es passt?
Kann man das so machen, dass es auf jedem Medium richtig angezeigt wird? also immer nach der DIN A 4 Seite?

Dafür ist HTML nicht gemacht. HTML soll sich dynamisch dem Monitor anpassen, sodass man es auf jedem Gerät anschauen kann (z.B. PC, Tablet, Smartphone, E-Book-Reader, Beamer, usw.).
Genau dafür gibt es PDF. Genau dafür wurde PDF sogar entwickelt. PDFs sehen auf jedem Gerät gleich aus und werden auch genauso ausgedruckt, wie sie aussehen.

Zitat von Carmen D

Könntest mir auch bei den Fussnoten helfen?

Das ist fix gemacht.

Zitat von Carmen D

Und wegen dem Head und Body Tag das weiss ich auch nicht...sowie mit der Doctype Deklaration...
Das ist mir echt zu hoch...

So soll es aussehen:

HTML-Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <title>Titel</title>
        <!-- Hier kommen die ganzen CSS-Regeln hin -->
    </head>
    <body>
        <!-- Hier kommt dann der ganze Inhalt rein. -->
    </body>
</html>

Bei dir sind momentan mehrere Doctyp-Deklarationen über das ganze Dokument verteilt.

Zitat von Carmen D

Was ist mit den Inline Grafiken?
Woran liegt es, dass das Banner an meinem Ipad nicht angezeigt wird, auf dem Computer meines Auftraggebers aber schon?

Das weiß ich (noch) nicht.

Zitat von Carmen D

Danke...
Wieso hilfst Runkir so...ist ja Wahnsinn

Naja, du hast ja die ganze Arbeit gemacht. Ich habe immer nur einzelne Fragen beantwortet.

Wegen der Fußnoten:

HTML-Code:

<style type="text/css">
/* Kopf- und Fusszeile nur im Ausdruck anzeigen */
@media screen {
.header, .footer {display: none}
}
@media print {
.header {position: fixed; top: 0;}
.footer {position: fixed: bottom: 0}
}
</style>
<!-- Kopfzeile -->
<div class="header">Anamnesebogen</div>
<!-- Fusszeile -->
<div class="footer">aesthetic partner - Nutrition &amp; Motion</div>

Die Eingabefelder sollte man aber trotzdem auf dem Bildschirm anzeigen. Man kann sie ja später beim Ausdruck ausblenden. Aber so wie es momentan verlangt ist, ist das total blöd und unnutzbar.

Und ich werde immer wieder betonen, dass für dieses Formular eine PDF-Datei genommen werden sollte.

Wenn schon keine Linie, dann vielleicht wenigstens eine Hintergrundfarbe für die Eingabefelder, so ein leichtes grau oder ähnliches?

Und mit DIV's arbeiten damit die ganzen <br> wegkommen?

Dann kannst du immer schön mit margin arbeiten und die Abstände sind immer gleich.

Wenn du mit dem Firefox als Browser arbeitest, lade dir doch mal das Add On HTML-Validator. Dann siehst du deine Fehler besser.

Zitat Spyx: Und ich werde immer wieder betonen, dass für dieses Formular eine PDF-Datei genommen werden sollte.

Da hast du wohl recht, aber gibt es denn Freeware mit dem du PDF-Formulare erstellen kannst? Adobe Acrobat ist ja faktisch unbezahlbar....
LG

Ausgedruckt sieht es so aus, wie gewollt. Aber solange man sich das Formular am Bildschirm anschaut, habe ich ein paar Verbesserungen zur Benutzbarkeit eingefügt.

Das Einfügen einer Kopf- und Fußzeile funktioniert doch nicht mit HTML. Das geht nur für Texte, die den Textfluss stören, wie z.B. Wasserzeichen. Aber das ist hier ja nicht gewollt. Momentan steht immer noch oben links der Text von Kopf- und Fußzeile.

Ob das Anzeigen des Bildes jetzt auf einem iPad geht oder nicht musst du ausprobieren. Eventuell ist die Dateigröße des Bildes zu groß, sodass der iPad-Browser das Bild einfach ignoriert.

Ein passendes kostenloses PDF-Formularerstellungs-Programm kenne ich nicht. So etwas brauche ich normalerweise nicht.
Edit: Mit Scribus ist das möglich. Damit kann man sogar sehr schöne PDFs erstellen. Hier mal ein Tutorial, wie man ausfüllbare PDFs damit erstellt:
A Brief Tutorial on Forms - Scribus Wiki

Siehe dir mal den Anhang aus meinem letzten Beitrag an. Der Code ist wesentlich einfacher zu lesen und dürfte dir beim Verstehen helfen.

Zitat von Carmen D

Wollte das Ganze so lösen, dass ich eine Tabelle mit einer Zeile und bspw. 4 Spalten mache. Dann hätte ich bspw. Körpergröße in die erste und Gewicht in die letzte Spalte eingetragen und so einen Abstand generiert...
Nur leider schreibt er beide Felder untereinander...
komm nicht drauf wo mein Fehler liegt...

Man nutzt eine Tabelle nicht für das Design. Das macht nur Probleme und ist ziemlich aufwendig.

In diesem Fall ist das Problem, dass Tabellen block-Elemente sind. block-Elemente werden untereinander angeordnet. Texte, Bilder, Eingabefelder, usw. sind inline-Elemente. Diese werden nacheinander im Textfluss eingefügt. Um diese Verhaltensweisen zu ändern gibt es die CSS-Eigenschaft display.

Zitat von Carmen D

Geht das auch zwischen Textfeld und Checkoxen?

Ja, hier mal ein Beispiel, wo du es problemlos ausprobieren kannst: