18041 sujets

Questions générales et questions de débutants

Afficher input si navigateur bloque css [résolu]

Bonjour à tous,
je suis débutant en css et je pense que c'est vraiment une question qui risuqe de vous paraitre ridicule. Smiley bawling
Je m'expliqueje cherche à développer une boite pour que les utilisateurs de mon site internet m'envoi des messages.
J'ai adapter du code à ce que je désire faire, mais j'ai eu alors un doute , si le css est désactivé sur le navigateur , comment l'utilisateur saura où remplir les champs (nom, adresse mail objetc....

je donne un bout de mon code html et un bout de mon code css
HTML


<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="commentForm">
    <input type="text" id="nameField" class="nameField" />
    <input type="text" id="emailField" class="emailField" />
    <input type="text" id="websiteField" class="websiteField" />
    <textarea id="commentField" class="commentField" cols="10" rows="5"></textarea>
    <input type="submit" id="sendButton" value="Envoyer" class="sendButton" />
</div>
</body>
</html>


CSS



.commentForm
{
    width: 1497px;
    height: 324px;
    position: fixed;
    top: 330px;
    right: -650px;
    background-image: url('comment_form2.jpg');
    background-repeat: no-repeat;
}
.commentForm input[type="text"], .commentForm textarea
{
    width: 210px;
    left: 12px;
    position: absolute;
    background-repeat: no-repeat;
    border-width:0px;
    font-weight:bold;
    font-family:Arial, Sans-Serif;
    font-size:0.9em;
}
.nameField
{
    top: 44px;
    height: 22px;
    background-image: url('name_bkg2.jpg');
}
.emailField
{
    top: 95px;
    height: 22px;
    background-image: url('email_bkg2.jpg');
}
.websiteField
{
    top: 143px;
    height: 22px;
    background-image: url('object_bkg2.jpg');
}
.commentField
{
    top: 178px;
    height:122px;
    background-image: url('comment_bkg2.jpg');
}
.sendButton
{
    position:absolute;
    top:268px;
    left:362px;
    width:100px;
    height:30px;
    border:solid 2px #000000;
    background-color:#dddddd;
    color:#000000;
}


Je vous remercie d'avance
Modifié par mamaye (07 Jul 2014 - 18:34)
Bonjour,

Avec Firefox, il est très facile de désactiver CSS ( Affichage, Style de la page, Aucun style), donc de répondre à votre question...

A ce jour, les sites utilisent abondamment CSS, ce qui fait que dans la pratique, les internautes qui désactivent CSS sont certainement très rares, donc le problème me parait mineur.

L'utilisation d'une image en fond d'écran d'un élément input peut être gênante pour les mal-voyants, auquel cas, si l'ajout d'une info à coté du champ input n'est pas possible, et si l'ajout d'un attribut placeholder ne vous parait pas judicieux pour le graphisme, l'ajout d'un attribut title (title='email', title='nom') est possible : à vous de voir.
Modifié par jlon (07 Jul 2014 - 14:59)
Merci pour vos réponses.
je précise qu'avant de poser la question j'avais pris le soin de chercher.
jlon m'apporte des éléments auxquels je n'avais pas pensé.
Ma question était si css bloqué alors que faire pour avoir un affichage quand même.
Mais je pense que ce n'est pas possible.
En tout cas merci pour vos réponses.
Modifié par mamaye (08 Jul 2014 - 13:49)
Modérateur
Bonjour,

Je pense qu'il faut suivre les bonnes pratiques de dev d'un formulaire (label, placeholder, input, etc -> tout les liens de 6l20).

Remplacer des inputs par des images et ensuite vouloir faire de l'accessibilité... c'est un poil contradictoire non ?! Smiley biggrin

Un formulaire propre et simple fait de label et de input s'affichera toujours comme un formulaire (même sans css vu que c'est du html) !

Le css doit être une surcouche se peinture et non un grand coup de plâtre pour remodeler/dénaturer les compos de base... en plus le CSS3 offre tellement de possibilité que tu devrait y trouver ton bonheur.

Maintenant que tout ça est dit, le cas d'utilisation ou le navigateur "bloque" le css doit être effectivement plus que rare ! (On me fait penser à la tablette Kindle)

Bon courage !
Smiley murf




au passage:
la position absolute sur tout tes élément est un peu abusif, positionner .commentForm suffit, tes éléments se placeront très bien par eux meme Smiley smile

et :
mamaye a écrit :
je suis débutant en css et je pense que c'est vraiment une question qui risuqe de vous paraitre ridicule

Même les plus grand maitres on été débutant un jour et aucune question n'est ridicule
Modérateur
mamaye a écrit :
OK je viens de piger merci beaucoup de votre aide

\o/ aussi
Bon courage ! Smiley murf

"In melios stad vertus."

Non non, c’est tout à fait correct : « La vertu est dans le juste milieu ».
En revanche, ça a rien à voir avec la conversation.


Merci pour les liens 6l20 (surtout celui du MDN il est top !).
Rebonjour
Encore un grand merci vous m'avez bien aiguillé (je n'ai commencé le css que depuis 3 jours)
voila ce que j'ai obtenu en suivant vos conseils pas beaucoup dormis hier soir Smiley zzzz Smiley zzzz
j'ai donc modifier mes deux codes de la fdaçon suivante

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div class="commentForm">
<p class="formfield">  
   <label for="nameField" >Nom</label>
        <input type="text" placeholder="&Eacute;crivez votre nom ici" id="nameField" class="nameField" />
 </p>  
  
[b]<p class="formfield">  
     <label for="emailField" >Votre Mail</label>
    <input type="text" placeholder="adresse@example.com" id="emailField"  class="emailField" />
 </p> [/b]
 [b]<p class="formfield"> 
    <label for="commentField" >objet</label>
    <input type="text" placeholder="objet" id="websiteField" class="websiteField" />
  </p>   [/b]
 [b]<p class="formfield">     
     <label for="commentField" >message</label>
    <textarea id="commentField" placeholder="Votre message" class="commentField" cols="10" rows="5"></textarea>
   </p>   [/b]
    <input type="submit" id="sendButton" value="Envoyer" class="sendButton" />
</div>
</body>
</html>



.commentForm
{
    width: 1497px;
    height: 324px;
    position: fixed;
    top: 330px;
    right: -650px;
    background-image: url('comment_form1.jpg');
    background-repeat: no-repeat;
}
.commentForm input[type="text"], .commentForm textarea
{
    width: 210px;
    left: 12px;
    position: absolute;
    background-repeat: no-repeat;
    border-width:0px;
    font-weight:bold;
    font-family:Arial, Sans-Serif;
    font-size:0.9em;
    
}
.commentForm label
{
font-weight:bold;	
padding :5px;
display:block;
} 

.nameField
{
    top: 44px;
    height: 22px;
    background-image: url('name_bkg2.jpg');
}

 

 

.emailField
{
    top: 85px;
    height: 22px;
    background-image: url('email_bkg2.jpg');
} 

/*label */
/*{
font-weight:bold;	
padding :5px;
display:block;
}*/

.websiteField
{
    top: 130px;
    height: 22px;
    background-image: url('object_bkg2.jpg');
}
.commentField
{
    top: 178px;
    height:122px;
    background-image: url('comment_bkg2.jpg');
}
.sendButton
{
    position:absolute;
    top:268px;
    left:362px;
    width:100px;
    height:30px;
    border:solid 2px #000000;
    background-color:#dddddd;
    color:#000000;
}
[b].formfield  {
   display:block;
}[/b]


en gras tout ce que j'ai rajouté j'ai donc retiré mes étiquettes en dur et obtenu des labels html .
Ma question à votre avis voyez vopus un moyen d'améliorer ce code?
Je vous joins une copie écran du résultat obtenu

upload/55365-resultat.png
assez fier de moi pour une première même si la police des labels ne me plait pas Smiley decu
Modérateur
Re,


Ah ça ressemble plus à un form bien fait ! Et l'aspect carte postal est cool aussi, bien réussi ! GG


Qu'est-ce que "name_bkg2.jpg" ? Est-ce c'est juste le fond gris de tes input ? Si oui, passe plutôt par du 100% CSS c'est 10 fois plus rapide/léger.

Pour la police des labels tu peux t'inspirer de vraies cartes.
Par ex : http://blog.caf71.fr/wp-content/uploads/2011/09/Carte-postal2.jpg
Donc une police sans serif, plus petite, grise et tout en majuscule.

Pour les placeholder j'aime bien mettre des exemples comme tu as fait pour le mail mais du coup pour les autres champs. (Nom "ex:Jack Bauer" / Objet "ex:Le monde est en danger" ...)

mamaye a écrit :
Ma question à votre avis voyez vopus un moyen d'améliorer ce code?

Le placement des label et input en absolute comme je l'ai marqué plus haut, je préfère laisser le flux normal des éléments, mais bon c'est pas trop gênant là.
Sinon il y aura tout ce qui est erreur/validation du formulaire (mais t'y a peut être déjà pensé)

Beau boulot en tout cas !
Smiley biggthumpup
Hello,

Ça prend forme (sans mauvais jeu de mot...) Smiley lol

Même conseil que Laurent, pensez à valider votre code.
- Déclaration Doctype : avez-vous réellement besoin du xml ? La syntaxe HTML5 vous simplifierai probablement les choses Smiley cligne
- Je ne vois pas l'élément HTML <form> ?
MDN a écrit :

Tous les formulaires HTML débutent par un élément <form>, comme celui-ci :
<form action="/ma-page-de-traitement" method="post">
...
</form>
Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments <div> ou <p>, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs action et method est considéré comme une bonne pratique.

L'attribut action définit la localisation (une URL) à laquelle les données collectées par le formulaire doivent être envoyées.
L'attribut method définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
Etc.

Bon courage Smiley cligne 

 6l20 a écrit :
Ça prend forme


Smiley rofl

oui effectivement cela prend forme 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form action="traitement2.php" method="post">
 <div class="commentForm">
<p class="formfield">  
   <label for="nameField" >Nom</label>
        <input type="text" placeholder="&Eacute;crivez votre nom ici" id="nameField" class="nameField" name="nameField" />
 </p>  
  
<p class="formfield">  
     <label for="emailField" >Votre Mail</label>
    <input type="text" placeholder="adresse@example.com" id="emailField"  class="emailField" name="emailField" />
 </p> 
 <p class="formfield"> 
    <label for="websiteField" >objet</label>
    <input type="text" placeholder="objet" id="websiteField" class="websiteField" name="websiteField" />
  </p>   
 <p class="formfield">     
     <label for="commentField" >message</label>
    <textarea id="commentField" placeholder="Votre message" class="commentField" cols="10" rows="5" name="commentField" ></textarea>
   </p>   
    <input type="submit" id="sendButton" value="Envoyer" class="sendButton" />
</div>
</form>
</body>
</html>


j'ai rajouté un HTML <form> normal je dois rajouté les données dans une BDD et dans un traitement xml Smiley cligne
Merci beaucoup de votre aide et merci à toi 6l20 pour tes liens Smiley smile
Modifié par mamaye (11 Jul 2014 - 12:44)
Sujet clos
Aller à