Nietypowe pole formularza Opcje

[demolka666]

Czy da się / Jak zrobić taki pole w formularzu (html/css/js)? Chodzi mi głównie o te strzałki.



Ten post edytował demolka666 3.08.2010, 00:12:52

[thomson89]

Do czego to ma służyć?

Możesz to zrobić, choćby w tabelce. Zwykły input w jednej "kolumnie" i obok dwie komórki ze strzałeczkami. Poczytaj.

[Crozin]

Kod

<input type="number" />

Ale to jeszcze nie jest zbyt dobrze wspierane przez część przeglądarek.

[demolka666]

Do czego to ma służyć?

Możesz to zrobić, choćby w tabelce. Zwykły input w jednej "kolumnie" i obok dwie komórki ze strzałeczkami. Poczytaj.

Ma służyć do przerzucania godziny - co 15 minut (czyli np 8:00 -> 8:15 ->8:30 itp).
To, co zasugerowałeś rozwiązywało by sprawę, bo bym wpisała w strzałki akcję przez js. Nie pomyślałam o tym. Jeszcze raz dzięki!
---------------------
EDIT

Bardzo proszę o pomoc w ostylowaniu tego. Nie umiem sobie z tym poradzić :/

efekt, jaki osiągnęłam pozostawia wiele do życzenia:


kod:

[HTML] pobierz, plaintext 
<table>
<tr>
       <td rowspan="2"><input maxlength="5" size="3" name="h"></td>
       <td valign="bottom"><img src="images/arrow_up.jpg"></td>
       <td rowspan="2">   -   </td>
       <td rowspan="2"><input maxlength="5" size="3" name="h2"></td>
       <td valign="bottom"><img src="images/arrow_up.jpg"></td>
</tr>
<tr>
       <td valign="top"><img src="images/arrow_down.jpg"></td>
       <td valign="top"><img src="images/arrow_down.jpg"></td>
</tr>
</table>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#popup_cont table{
	border-collapse:collapse
}
 
#popup_cont table td{
	height: 9px;
	overflow:hidden;
	margin:0;
	padding:0;
}
[CSS] pobierz, plaintext 

Ten post edytował demolka666 3.08.2010, 16:13:06

[Pawel_W]

prościej Ci już chyba będzie zamiast tej tabelki zrobić mapę odsyłaczy

[Crozin]

Ah, czyli chodzi o czas.

Kod

<input type="time" step="900" name="field-name" />

Póki co obsługiwane jedynie przez Operę, ale reszta przeglądarek miejmy nadzieję szybko dogoni. W JavaScripcie mógłbyś zrobić to na zasadzie: jeżeli przeglądarka nie obsługuje tego typu pola to robię to w JS.

Całość sprowadza się do jakiś dwóch grafik strzałek i pola tekstowego. Popróbuj trochę pokombinować - nie jest to trudne.
Aha... użycie tabelki w takim miejscu to masochizm - w dodatku kompletnie niepoprawny.

[demolka666]

@Pawel_W
Dzięki za wskazówkę! Powiem szczerze że nigdy wcześniej nie korzystałam z mapy odsyłaczy, ale teraz ją wykorzystałam - i uzyskałam taki efekt jak chciałam! Dzięki

@Crozin
Co do tabelek to właśnie się przekonałam, jakie to jest makabryczne . Będę kombinować teraz z JS, co w moim przypadku (kompletnie początkujący w js, ale znam php) będzie też trudne. Idę wytężyć mózg i jakiś skrypt wymyślić. Pewnie jeszcze się odezwę .

[thomson89]

Nadaj height tabelce to może się ściśnią - lub popróbuj z marginesami.

[CuteOne]

Takie rzeczy lepiej w divach robić. Zamiast button wstaw obrazki dopisz wydarzenie onClick i gotowe

[HTML] pobierz, plaintext 
	<div>
		<div style="float:left">
			<input type="text" />
		</div>
		<div style="float:left">
			<input type="button" style="height:10px"><br />
			<input type="button" style="height:10px">
		</div>
	</div>
[HTML] pobierz, plaintext