Sternebwertung HTML/CSS/PHP?
Hallo, meine Fräge ist, wie ich auf einer Webseite eine schöne Sternebwertung machen kann und diese dann in einem Google Docs Dokument auslesen kann. Ich habe derzeit nur textfelder auf meiner seite. Ich kann den Inhalt der TExtfelder auch mittels PHP weiterleiten und auf einer anderen Seite auslesen. Mein ZIel wäre es aber, dass an stelle der Textfelder eine Sternebewertung von 1-5 wäre und ich die Bewertung in einem Google Docs Dokument Anzeigen lassen kann.
Ich hoffe mir kann jemand weiterhelfen.
mfg
David
4 Antworten
Du brauchst für die Lösung kein JavaScript. Radio Buttons reichen dafür aus.
Die Selektion lässt sich mit CSS lösen. Dazu ein kleines Beispiel, um einen ersten Ansatz zu finden:
HTML:
<form>
<input type="radio" id="rating-input-radio-3" name="rating-input-radio" value="3">
<label for="rating-input-radio-3">3</label>
<input type="radio" id="rating-input-radio-2" name="rating-input-radio" value="2">
<label for="rating-input-radio-2">2</label>
<input type="radio" id="rating-input-radio-1" name="rating-input-radio" value="1">
<label for="rating-input-radio-1">1</label>
</form>
CSS:
input[type=radio] {
display: none;
}
label {
background: orange;
display: inline-block;
float: right;
height: 20px;
margin: 5px;
width: 20px;
}
input:checked + label,
input:checked ~ input + label {
background: green;
}
Statt der Zahlen für die Labels könntest du dir Bilder / Icons (z.B. von irgendeiner Schriftart) einblenden lassen.
1) Durch verschiede RadioButton-Gruppen. Jede Gruppe steht für ein Thema. Um Radiobuttons zu gruppieren, wird ihnen der jeweils gleiche Name (name-Attribut) zugeordnet.
2) Wie schon LeBonyt schrieb: Es gibt eine API. Für die Sheets-Dokumente wäre das die Sheets API. Unter Guides findest du auch ein Quickstart-Tutorial für PHP.
Verschicke also erst die Daten an ein PHP-Skript, lese die gewählten Werte aus und nutze dann die API, um sie an Google zu schicken.
Minimalbeispiel für den ersten Teil, der zeigt, wie man einen Radio Button auslesen und seinen Wert im Browser ausgeben kann:
HTML:
<!doctype html>
<title>Example</title>
<meta charset="utf-8">
<form action="script.php" method="post">
<input name="test" type="radio" value="some value">
<input name="test" type="radio" value="some other value">
<button>Send</button>
</form>
script.php:
<?php
if (isset($_POST["test"])) {
print $_POST["test"];
}
Darauf kannst du, denke ich, aufbauen. Schau dir zudem die filter-Funktionen an, die PHP bietet. Werte, die von außen kommen (hier also vom Nutzer), solltest du stets validieren, bevor du sie weiterverwendest. Es könnten ja auch Werte sein, die du gar nicht haben möchtest (ein Formular lässt sich von außen auch manipulieren).
Mein Problem ist derzeit, dass ich 3 verschiedene Themen (Ambiente, Essen, Service) bewerten muss, allerdings nur die obersten Radio Buttons auswählen kann und somit nur ein Thema bewerten. Habe auch schon versucht name zu ändern und id zu ändern.
Ausschnitt aus meinem code:
<form method="post" autocomplete="off" name="google-doc">
<div class="form-group">
Ambiente:
<input type="radio" id="rating-input-radio-1" name="rating-input-radio1" value="1">
<label for="rating-input-radio-1">✩</label>
<input type="radio" id="rating-input-radio-2" name="rating-input-radio1" value="2">
<label for="rating-input-radio-2">✩</label>
<input type="radio" id="rating-input-radio-3" name="rating-input-radio1" value="3">
<label for="rating-input-radio-3">✩</label>
<input type="radio" id="rating-input-radio-4" name="rating-input-radio1" value="4">
<label for="rating-input-radio-4">✩</label>
<input type="radio" id="rating-input-radio-5" name="rating-input-radio1" value="5">
<label for="rating-input-radio-5">✩</label>
</div>
<div class="form-group">
Essen:
<input type="radio" id="rating-input-radio-11" name="rating-input-radio2" value="1">
<label for="rating-input-radio-1">✩</label>
<input type="radio" id="rating-input-radio-21" name="rating-input-radio2" value="2">
<label for="rating-input-radio-2">✩</label>
<input type="radio" id="rating-input-radio-31" name="rating-input-radio2" value="3">
<label for="rating-input-radio-3">✩</label>
<input type="radio" id="rating-input-radio-41" name="rating-input-radio2" value="4">
<label for="rating-input-radio-4">✩</label>
<input type="radio" id="rating-input-radio-51" name="rating-input-radio2" value="5">
<label for="rating-input-radio-5">✩</label>
</div>
<div class="form-group">
Service:
<input type="radio" id="rating-input-radio-12" name="rating-input-radio3" value="1">
<label for="rating-input-radio-1">✩</label>
<input type="radio" id="rating-input-radio-22" name="rating-input-radio3" value="2">
<label for="rating-input-radio-2">✩</label>
<input type="radio" id="rating-input-radio-32" name="rating-input-radio3" value="3">
<label for="rating-input-radio-3">✩</label>
<input type="radio" id="rating-input-radio-42" name="rating-input-radio3" value="4">
<label for="rating-input-radio-4">✩</label>
<input type="radio" id="rating-input-radio-52" name="rating-input-radio3" value="5">
<label for="rating-input-radio-5">✩</label>
</div>
<div class="form-group">
Persönliches Feedback:<input type="text" name="Feedback" class="form-control" placeholder="Feedback"/>
</div>
<input type="submit" name="submit" class="btnSubmit btn-block" value="Bewertung abgeben" />
</form>
Also ich kann für jede Kategorie eine Wertung hinterlassen (bzw. einen Radio Button auswählen), wenn ich deinen Code teste: https://jsfiddle.net/exgL527k/
liegt es vlt an der css?
body {
background-color:black;
}
#ueberschrift{
color: white;
font-size:60px;
font-family: Calibrilight;
text-align: center;
}
input[type=radio] {
display: none;
}
label {
background: yellow;
display: inline-block;
float: right;
height: 20px;
margin: 5px;
width: 20px;
}
input:checked + label,
input:checked ~ input + label {
background: yellow;
}
a:link {
background-color: white;
font-size: 1.5rem;
}
a:link {
text-decoration: none;
font-size: 1.5rem;
}
a:hover {
text-decoration: underline;
font-size: 1.5rem;
}
a:hover {
background-color: lightblue;
font-size: 1.5rem;
}
.register .nav-tabs .nav-link:hover{
border: none;
}
.text-align{
margin-top: -3%;
margin-bottom: -9%;
padding: 10%;
margin-left: 30%;
}
.form-new{
margin-right: 22%;
margin-left: 20%;
}
.register-heading{
margin-left: 21%;
margin-bottom: 10%;
color: #e9ecef;
}
.register-heading h1{
margin-left: 21%;
margin-bottom: 10%;
color: #e9ecef;
}
.register{
background: -webkit-linear-gradient(left, #055a4f, #00c6ff);
margin-top: 3%;
padding: 3%;
border-radius: 2.5rem;
}
.btnSubmit{
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #03612e;
border: none;
cursor: pointer;
margin-right: 6%;
color: rgb(246, 246, 252);
margin-top: 4%;
}
Wieso verwendest du nicht einfach 5 "radio" Buttons
https://www.w3schools.com/tags/att_input_type_radio.asp
Man kann einen Auswählen.
Das PHP wertet dann den Button aus und erstellt das Dokument das du möchtest mit der Bewertung
Okay. Ist doch ganz simpel, einfach die Sternebewertung als hidden Parameter über das Google Docs API an das Google Docs schicken.
Hallo David,
ich bin mir nicht ganz sicher aber denke das du dafür JavaScript brauchst.
Korrigiert mich wenn ich falsch liege.
Till
Wozu JS?
Die Auswertung der Formular Auswertung macht man doch mit PHP
Habe jetzt das Problem, dass ich 3 verschiedende Themen Bewerten muss, allerdings immer nur einen Radio Button auswählen kann und somit kann ich nicht 3 Verschiedene Themen bewerten. Gibt es da eine LÖsung?