robię formularz z pustymi kratkami do zaznaczenia
i mam problem
Jak zrobić taki prosty wiersz z tekstem i dwoma pustymi kratkami?
A) [] wyrażam zgodę [] nie wyrażam zgody
próbowałem też każdy tekst zamknąć w jednej tabeli, ale jeśli w komórce jest dużo tekstu do przechodzi on do nowej linii zwiększając wiersz tabeli a tym samym zwiększając rozmiar pustej kratki, co też źle wygląda.
Na pewno są na to łatwiejsze sposoby.
Pomożecie?
Za pomocą <input type="radio">. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
<p>
A) <label><input name="a" type="radio"> wyrażam zgodę</label><label><input name="a" type="radio"> nie wyrażam zgody</label>
</p>
<p>B) <label><input name="b" type="radio"> wyrażam zgodę</label><label><input name="b" type="radio"> nie wyrażam zgody</label></p>
ale to będzie dokument drukowany
trzeba postawić znak X w kratki
A możesz narysować, jak to ma wyglądać?
Bo za bardzo nie rozumiem, w czym jest problem - to, o czym piszesz wydaje mi się trywialne, więc obawiam się, że czegoś nie rozumiem.
Drugie pytanie - czy te X w kratce mają być postawione w HTML i potem się wydrukować, czy masz stawiać ręcznie krzyżyk na papierowej wersji?
a)<table style="width:30px;border-collapse:collapse"><tr><td style="border: 1px solid black;width:30px;height:30px"></td></tr></table> wyrażam zgodę
<table style="width:30px;border-collapse:collapse"><tr><td style="border: 1px solid black;width:30px;height:30px"></td></tr></table>  nie wyrażam zgody
a kratki to mają być puste do wypełnienia po wydrukowaniu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
.opcja + .opcja {
margin-left: 2em;
}
.kratka {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}
</style>
a) <span class=opcja><span class=kratka></span> wyrażam zgodę</span>
<span class=opcja><span class=kratka></span> nie wyrażam zgody</span>
</body>
</html>
table do czego innego służy. Jak masz faktycznie tabelkę np. tabelka krajów tam, gdzie masz List of countries.... https://en.wikipedia.org/wiki/List_of_countries_and_dependencies_by_population . Z 20 lat temu natomiast się używało table też do ogólnego rozmieszczenia elementów na stronie (czy do jakichś tricków, jak w twoim poście pewnie też), no ale tak się nie robi już od kilkunastu lat i nie ma co używać starych technik, jeśli można prościej.
A te kratki mają być tylko w druku, czy jednocześnie na ekranie jak i druku?
Jeśli i na ekranie i w druku, to tu coś znalazłem, jak wystylować radio buttony pod druk: https://alvaromontoro.com/blog/68024/css-tip-style-checkboxes-radio-buttons-for-printing
Chyba, że tylko w druku, to tak jak @dzek69 podał można zrobić, tylko wtedy dla przeglądarki będzie to tylko prostokącik, bez możliwości interakcji.
Nie rób tego w <TABLE>, mamy teraz lepsze narzędzia. Kilka pomysłów na szybko do wdrożenia:
<DIV> ostylowane jako display: inline-block
My Razem napisał(a):
ale to będzie dokument drukowany
trzeba postawić znak X w kratki
Jeśli to ma być drukowane, to czy na pewno HTML to jest najlepsze narzędzie do tego celu? Może warto by zajrzeć do LibreOffice Writer albo Google Docs?
My Razem napisał(a):
ale to będzie dokument drukowany
trzeba postawić znak X w kratki
Nie widzę problemu, nadal polecam to zrobić przez input type="checkbox". Możesz dowolnie ostylować cssami i na przykład zrobić kratkę większą, albo z białym tłem
@media print {
input[type=checkbox] {
width: 1.5em;
height: 1.5em;
}
}
Na pewno lepiej niż tabelki + border. User też będzie mógł wypełnić wstępnie formularz przed wydrukowaniem i wypełnieniem reszty.
<form>
a)
<input type="checkbox" id="agree" name="consent" value="agree" style="transform: scale(1.5)" disabled>
<label for="agree">wyrażam zgodę</label>
<input type="checkbox" id="disagree" name="consent" value="disagree" style="transform: scale(1.5)" disabled>
<label for="disagree">nie wyrażam zgody</label>
</form>
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.