Toon posts:

[html] andere soort formulier velden qua layout?

Pagina: 1

Acties:

201 views sinds 30-01-2008
Reageer

vrijdag 8 september 2000 15:43

Acties:

HenkS

Da_king alias HenkS

Topicstarter

he hallo

Is het ook mogelijk om formuliervelden (gewoon text invoer velden) anders te laten uitzien, dus niet echt zo'n invoer hok hebt maar een grafisch wat anders, en dan heb ik het dus niet over flash, maar wat voor mogelijkheden heb je?

Ik heb eens zoiets gezien dat je ergens gegevens moest invullen en dat je niet in zo'n invoervak typte maar net alsof je gewoon op de achtergrond typte.

Ja ik weet dat het allemaal wat vaag is, maar is wat moeilijk uit te leggen. Maar weet iemand mogelijkheden of sites met voorbeelden ofzo?

vrijdag 8 september 2000 16:45

Acties:

jurriaan

Met CSS kun je ook formuliervelden opmaken,
ik heb hier even niet mijn links, maar ik weet zeker dat iemand anders je wel een goede url kan geven.

Wees verantwoordelijk voor je eigen daden

vrijdag 8 september 2000 20:00

Acties:

Apache

amateur software devver

mja, ik zoek ook zoiets, zoiets als het onderaan bij het comment systeem op http://csnation.counter-strike.net , ik heb liever een tutorial dan dat ik de source rip

If it ain't broken it doesn't have enough features

vrijdag 8 september 2000 20:19

Acties:

Tom

Kan met DHTML. Zie www.dansteinman.com/dynduo. Vind het persoonlijk teveel werk om ermee te kutten, gebruik wel standaard formuliertjes of gooi er zo'n CSS styledingetje omheen (wat vaak in Netscape niet werkt trouwens).

vrijdag 8 september 2000 20:20

Acties:

Verwijderd

Wat ik heb gedaan is het volgende:
<textarea name="comment" cols="62" rows="11" style="font-family: Verdana,Arial,Helvetica; font-size: 12; background-color: 373D5D; color: #C1C1C1; border:3px solid #3A4537">
<textarea name="comment" cols="62" rows="11" style="font-family: Verdana,Arial,Helvetica; font-size: 12; background-color: 373D5D; color: #C1C1C1; border:3px solid #3A4537">BlaBlaBla<###/textarea></textarea>
Zonder de drie "#" in de laatste textarea tag uiteraard. Succes!

vrijdag 8 september 2000 21:16

Acties:

jurriaan

copy & paste deze code:

<HTML>
<HEAD>
<TITLE>forms</TITLE>
<STYLE TYPE="text/css">
.textbox1 input {background-color: #FF0000}
.textbox2 input {background-image: url(flower.gif)}
.textbox3 input {border: inset blue 3px}
.textbox4 input {color: blue}
.textbox5 input {cursor: crosshair}
.textbox6 input {filter: blur()}
.textbox7 input {filter: alpha(60)}
.textbox8 input {filter: FlipH()}
.textbox9 input {filter: FlipV()}
.textbox10 input {font-family: verdana; font-size: 10pt;}
.textbox11 input {margin-left: 10px}
.textbox12 input {padding-left: 10px}
.textbox13 input {text-align: right}
.textbox14 input {text-decoration: underline}
.textbox15 input {width: 300px}
</STYLE>
</HEAD>
<BODY>
<FORM>
<DIV CLASS="textbox1">
<INPUT TYPE=TEXT> background-color: #FF0000
</DIV>

<DIV CLASS="textbox2">
<INPUT TYPE=TEXT> background-image: url(flower.gif)
</DIV>

<DIV CLASS="textbox3">
<INPUT TYPE=TEXT> border: inset blue 3px
</DIV>

<DIV CLASS="textbox4">
<INPUT TYPE=TEXT VALUE="Blue"> color: blue
</DIV>

<DIV CLASS="textbox5">
<INPUT TYPE=TEXT> cursor: crosshair
</DIV>

<DIV CLASS="textbox6">
<INPUT TYPE=TEXT VALUE="Blur"> filter: blur()
</DIV>

<DIV CLASS="textbox7">
<INPUT TYPE=TEXT VALUE="Alpha"> filter: alpha(60)
</DIV>

<DIV CLASS="textbox8">
<INPUT TYPE=TEXT VALUE="FlipH"> filter: FlipH()
</DIV>

<DIV CLASS="textbox9">
<INPUT TYPE=TEXT VALUE="FlipV"> filter: FlipV()
</DIV>

<DIV CLASS="textbox10">
<INPUT TYPE=TEXT VALUE="Verdana"> font-family: verdana; font-size: 10pt
</DIV>

<DIV CLASS="textbox11">
<INPUT TYPE=TEXT VALUE="margin"> margin-left: 10px
</DIV>

<DIV CLASS="textbox12">
<INPUT TYPE=TEXT VALUE="padding"> padding-left: 10px
</DIV>

<DIV CLASS="textbox13">
<INPUT TYPE=TEXT VALUE="Rechts"> text-align: right
</DIV>

<DIV CLASS="textbox14">
<INPUT TYPE=TEXT VALUE="Onderlijnt"> text-decoration: underline
</DIV>

<DIV CLASS="textbox15">
<INPUT TYPE=TEXT> width: 300px
</DIV>

</FORM>
</BODY>
</HTML>

Dit laat een heel stel opties zien, maarrrrr uiteraard bijna allemaal alleen IE. Netscape, onder het motto "Wij proberen designen moeilijk te maken en uw internetplezier te vergallen want we houden ons zo geweldig aan de regels, goed hè?" verkloot sommige zelfs flink dus die zul je niet kunnen gebruiken. Let vooral op die filters! Hoe bedoel je geweldig. Er zijn er nog veel meer, zoals DropShadow, Glow en eigenlijk nog een hele zooi photoshop filters, maar ik kreeg ze binnen <input> niet aan de praat.. wel hele mooie opties!!

Wees verantwoordelijk voor je eigen daden

vrijdag 8 september 2000 21:21

Acties:

jurriaan

heh in de tijd dat ik dat gemaakt had zijn er toch nog wat antwoorden gekomen

Wees verantwoordelijk voor je eigen daden

vrijdag 8 september 2000 22:05

Acties:

Tom

Da's inderdaad wel handig!

donderdag 8 februari 2001 22:59

Acties:

sebas

dit is echt kewl, effe omhoog ermee

Everyone complains of his memory, no one of his judgement.

vrijdag 9 februari 2001 10:48

Acties:

Verwijderd

In de Computer Arts SPECIAL van deze maand staat een compleet CSS overzicht, ook met formuliervelden.

vrijdag 9 februari 2001 14:48

Acties:

Pelle

🚴‍♂️

Op vrijdag 08 september 2000 21:16 schreef jurriaan het volgende:
Dit laat een heel stel opties zien, maarrrrr uiteraard bijna allemaal alleen IE. Netscape, onder het motto "Wij proberen designen moeilijk te maken en uw internetplezier te vergallen want we houden ons zo geweldig aan de regels, goed hè?" verkloot sommige zelfs flink dus die zul je niet kunnen gebruiken.

Netscape kent niet al deze style-elementen inderdaad, dus als je een class meegeeft aan een <input type="text"> dan doet NS daar rare dingen mee. Probeer maar eens een border te zetten, of een andere achtergrondkleur.
Er is een mooie manier om het op te lossen:

code:

    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css" DISABLED>
    <!--
        .inschrijven {
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 9pt;
            color: #333366;
            width: 240px;
            background-color: #fffffff; 
            border-style: solid; border-width: 0px; border-color: #ffffff;          
        }
        .inschrijven2 {
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 9pt;
            color: #333366;
        }
    -->
    </style>

De externe stylesheet is voor IE, en die daaronder voor NS. Omdat er DISABLED staat in de style-tag, leest IE er overheen. NS kent dat attribuut niet, dus die overruled gewoon de style-specificaties in style.css.
Klein beetje werk, groot plezier

Voor een voorbeeld: http://www.dads.nl, en dan even kijken bij inschrijven.

vrijdag 9 februari 2001 14:54

Acties:

GraasGast

Analogue Heaven

beetje offtopic, maar met flash kan je ook leuke dingen doen op het gebied van forms...je eigen fontjes kiezen enzo, en gedraaide inputvelden, schuin dus. erg geinig

vrijdag 9 februari 2001 14:56

Acties:

Pelle

🚴‍♂️

Daar had 'ie zelf ook al aan gedacht hoor, maar dat wou hij dus niet:

Is het ook mogelijk om formuliervelden (gewoon text invoer velden) anders te laten uitzien, dus niet echt zo'n invoer hok hebt maar een grafisch wat anders, en dan heb ik het dus niet over flash, maar wat voor mogelijkheden heb je?

vrijdag 9 februari 2001 15:06

Acties:

GraasGast

Analogue Heaven

Op vrijdag 09 februari 2001 14:56 schreef Pelle het volgende:
Daar had 'ie zelf ook al aan gedacht hoor, maar dat wou hij dus niet:
[..]

Niet goed gelezen

sorry!

vrijdag 9 februari 2001 15:51

Acties:

Hangloozz

{ @$%&# }

heej, cooletjes...

ik was al eens bezig geweest om die inputtypes te beïvloeden, maar was nog niet verder gekomen dan het font-family, padding en marging.
Nu dus ff een goede aanvulling

zenx Jurriaan..

www.jurgroessen.nl

woensdag 25 juli 2001 19:38

Acties:

InterRubke

die style dingetjes zijn leuk maar kan die ook voor een list box (<select...)

ik wil de border uitzetten, en dropdown button aanpassen van kleur maar dat lukt me niet

on the 8th day god started debugging

woensdag 25 juli 2001 20:12

Acties:

Pelle

🚴‍♂️

Op woensdag 25 juli 2001 19:38 schreef InterRubke het volgende:
die style dingetjes zijn leuk maar kan die ook voor een list box (<select...)

ik wil de border uitzetten, en dropdown button aanpassen van kleur maar dat lukt me niet

Grrr... UTFS
[url="http://gathering.tweakers.net/forum/find/keyword?data%5Bq%5D=select+aanpassen#hitstart]http://gathering.tweakers.net/forum/find/keyword?data%5Bq%5D=select+aanpassen[/url]#hitstart

Topic is errug oud trouwens...

woensdag 25 juli 2001 21:42

Acties:

Verwijderd

Anders haal je even een oud topic omhoog...

donderdag 26 juli 2001 11:10

Acties:

Verwijderd

Op vrijdag 08 september 2000 21:16 schreef jurriaan het volgende:
copy & paste deze code:

(html code)

Dit laat een heel stel opties zien, maarrrrr uiteraard bijna allemaal alleen IE. Netscape, onder het motto "Wij proberen designen moeilijk te maken en uw internetplezier te vergallen want we houden ons zo geweldig aan de regels, goed hè?" verkloot sommige zelfs flink dus die zul je niet kunnen gebruiken. Let vooral op die filters! Hoe bedoel je geweldig. Er zijn er nog veel meer, zoals DropShadow, Glow en eigenlijk nog een hele zooi photoshop filters, maar ik kreeg ze binnen <input> niet aan de praat.. wel hele mooie opties!!

Thanx, nu weet ik hoe ik al die cascade style sheet functies moet gebruiken in Golive

donderdag 26 juli 2001 12:05

Acties:

Verwijderd

Op vrijdag 09 februari 2001 14:48 schreef Pelle het volgende:

[..]

Netscape kent niet al deze style-elementen inderdaad, dus als je een class meegeeft aan een <input type="text"> dan doet NS daar rare dingen mee. Probeer maar eens een border te zetten, of een andere achtergrondkleur.
Er is een mooie manier om het op te lossen:
code:
1
...
De externe stylesheet is voor IE, en die daaronder voor NS. Omdat er DISABLED staat in de style-tag, leest IE er overheen. NS kent dat attribuut niet, dus die overruled gewoon de style-specificaties in style.css.
Klein beetje werk, groot plezier
Voor een voorbeeld: http://www.dads.nl, en dan even kijken bij inschrijven.

dat is een handige truc!!

Pagina: 1

Reageer