/    Sign up×
Community /Pin to ProfileBookmark

Inline to Internal; forms

Copy linkTweet thisAlerts:
Dec 10.2010

I’m relatively new to CSS, however
I do know most of the basics.

I haven’t styled forms very much
so I’m not sure how it is done properly.

[code=php]<label>1<input name=”first” id=”first” size=”2″ disabled style=”width:140px;height:65px;font-size:60px”><img alt=”” src=”images/default.jpeg” height=”50″ width=”75″></label>[/code]

I would like to take the style: “… style=”width:140px;height:65px;font-size:60px” …” and place it in the head with the rest of my Internal
Style, but I just can’t seem to get the name right.

I know it should be something like:

input[type=”text”]{}

but I only want to style eight of the
nine form inputs. I don’t want to
style one of the inputs.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Big_O_1_Dec 10.2010 — Are you sure you want to wrap the input and image elements inside a label? Usually the label is separate and closed before the input starts. Also what is the point of the image tag? Are you trying to use an image for the input box? If so, use a background image instead. If not, the input tag should be closed before the image tag starts. You haven't closed the input tag anywhere.

[CODE]<label>1</label>
<input class="something" name="first" id="first" size="2" disabled />
[/CODE]

With the CSS being something like this:
[CODE]
input.something
{
background-image: url("images/default.jpeg");
}
[/CODE]

If you want to style eight of nine form inputs you could either give those eight a class and apply the CSS via the class selector. Alternatively you could give the one you don't want to style a class, apply the style to all inputs, then select the one with a class and override the style.
Copy linkTweet thisAlerts:
@FangDec 10.2010 — You haven't closed the input tag anywhere.[/QUOTE]That is only required in xhtml

The [I]disabled[/I] is html for xhtml it would be [I]disabled="disabled"[/I]

Usually the label is separate and closed before the input starts[/QUOTE]Wrapping the input implicitly associates it to the label. http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

Wrapping the text, input and image allows the used to click on any of these elements to focus on the input.
Copy linkTweet thisAlerts:
@anothenauthorDec 10.2010 — Sorry Big O,

I really didn't want to do a whole

lot of explaining, but it you want to

see the actual page:

Relative Strength

The inputs are disabled and are outputs from

the Javascript code. The image depends

on the output of the contents.

The Label styles the contents with

size and "block"
[code=php]label
{font-size:60px;
display:block;}[/code]

You're right, I forgot to close the input tags,

lol, it's still working though, I'll fix that.


Okay, just fixed it, thx Big O.

omg that was embarrassingly simple.
Copy linkTweet thisAlerts:
@anothenauthorDec 10.2010 — That is only required in xhtml

The [I]disabled[/I] is html for xhtml it would be [I]disabled="disabled"[/I]

Wrapping the input implicitly associates it to the label. http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

Wrapping the text, input and image allows the used to click on any of these elements to focus on the input.[/QUOTE]

Well darn, I am using xhtml, I guess I need to

fix that too.
[code=php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/code]
Copy linkTweet thisAlerts:
@EkangarooDec 11.2010 — If you prefer to use the id='first' to identify your input field , remember to use the hash sign # in the style section:

#first

{

width:140px;

height:65px;

font-size:60px;

background-image: url('images/default.jpeg');

}
Copy linkTweet thisAlerts:
@anothenauthorDec 11.2010 — Sorry eKangaroo, I forgot to reply.

Yes, I'm familiar with that styles

proceedure. I just get confused

between the two sometimes.

I just don't have much experience

styling forms, in fact I think this

is the first time I've styled a form.
×

Success!

Help @anothen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...