[RESOLU] Lien cliquable dans un champ de formulaire

08 avr. 2021, 19:40

Bonjour

je fais un petit formulaire pour présenter les news d'une association (infos non modifiables).
L'une des infos et un lien que je voudrai rendre cliquable mais je n'y arrive pas.

Code : Tout sélectionner

<div class="container-fluid">
                    <strong>News de la Fédération Française de Mölkky</strong>
                    <?php
                    foreach ($resultatNews as $infos) {
                    ?>
                        <form>
                            <input type="text" class="form-control" value="<?= $infos['Titre_News'] ?>" readonly>
                            <textarea cols="99" rows="4" readonly><?= $infos['Commentaires_News'] ?>"</textarea>
                            <input type="url" class="form-control" href value="<?= $infos['Lien_News'] ?>">
                            <input type="text" class="form-control" value="<?= "Date de publication: " . $infos['Date_News'] . " par : " . $infos['Type_Long'] ?> " readonly>
                        </form>
                    <?php
                    }
                    ?>
                </div>

Un idée?

08 avr. 2021, 19:41

Bonjour

je fais un petit formulaire pour présenter les news d'une association (infos non modifiables).
L'une des infos et un lien que je voudrai rendre cliquable mais je n'y arrive pas.
Code : Tout sélectionner
<div class="container-fluid"> <strong>TEST</strong> <?php foreach ($resultatNews as $infos) { ?> <form> <input type="text" class="form-control" value="<?= $infos['Titre_News'] ?>" readonly> <textarea cols="99" rows="4" readonly><?= $infos['Commentaires_News'] ?>"</textarea> <input type="url" class="form-control" href value="<?= $infos['Lien_News'] ?>"> <input type="text" class="form-control" value="<?= "Date de publication: " . $infos['Date_News'] . " par : " . $infos['Type_Long'] ?> " readonly> </form> <?php } ?> </div>
Un idée?

08 avr. 2021, 20:15

un formulaire et des champs de formulaire, cela sert à modifier des valeurs. pour seulement afficher le contenu d'une table, pas besoin de formulaire.

<?php
foreach ($resultatNews as $infos) {
?>
<h1><?= $infos['Titre_News'] ?></h1>
<p><?= $infos['Commentaires_News'] ?>"</p>
<?php
}
?>

08 avr. 2021, 20:18

Ok merci

09 avr. 2021, 16:40

Bonjour, je reviens un peu sur le sujet avant de le clôturer.
J'ai quand même utilisé un formulaire pour afficher mes données afin de bénéficier de la puissance des champs textaera.
L'utilisateur peut suivant son besoin agrandir la zone pour tout afficher et bénéficie aussi d'une barre de défilement verticale.
Avec un peu de CSS je trompe mon monde et cela fait bon effet.
Pour lien dans le champ, j'avais commis une erreur de débutant (ben oui normal c'est la zone débutant

).
J'avais écris,

Code : Tout sélectionner

<input type="url" class="form-control" href value="<?= $infos['Lien_News'] ?>">

alors que j'aurais du faire, par exemple:

Code : Tout sélectionner

<a style="background-color:white" href="<?= $infos['Lien_News'] ?>" target="_blank"><i class="far fa-file-pdf fa-3x" style="color:#FF0000"></i></a>

J'avais donc tout simplement oublié soit une icône de type font comme j'ai fais, soit un texte sur lequel cliquer.
Gros oubli.
Merci quand même.

10 avr. 2021, 08:06

J'ai quand même utilisé un formulaire pour afficher mes données afin de bénéficier de la puissance des champs textaera.
L'utilisateur peut suivant son besoin agrandir la zone pour tout afficher et bénéficie aussi d'une barre de défilement verticale.
Avec un peu de CSS je trompe mon monde et cela fait bon effet.

Encore + propre : il est possible de faire cela avec un simple div et la propriété CSS "resize" :

div {
  resize: both; /* tu peux choisir horizontal ou vertical sinon */
  overflow: auto;
}

https://www.w3schools.com/cssref/css3_pr_resize.asp

10 avr. 2021, 23:35

Merci

11 avr. 2021, 13:21

Je reviens pour dire un grand merci, la propriété resize ma permis de résoudre quelques problèmes.
Voici mon CSS.

Code : Tout sélectionner

form {
width: 600px;
    /* Encadré pour voir les limites du formulaire */
 padding: 1em;
 border: 1px solid  rgb(245, 13, 13);
 border-radius: 1em;
 background-color:rgb(224, 205, 169,0.5);
}
.resize{
height: 100px;
width: 500px;
background-color:rgb(224, 205, 169,0.5);
border: 1px dashed rgb(0, 26, 114);
resize: both;
overflow: auto;
} 
.divtext{
   width: 5;
   text-decoration: underline rgb(200, 16, 46);
   background-color:rgb(224, 205, 169,0.5);
}
.divtext2{
   width: 5;
   background-color:rgb(224, 205, 169,0.5);
}

Et mon code modifié

Code : Tout sélectionner

<?php
                    foreach ($resultatNews as $infos) {
                    ?>
                        <form>
                            <div class="divtext"><?= $infos['Type_Article'] ?></div>
                            <div class="divtext2"><?= $infos['Titre_News'] ?></div>
                            <div class="resize"><?= $infos['Commentaires_News'] ?></div>
                            <?php
                            if (isset($infos['Lien_News']) && !empty($infos['Lien_News'])) {
                            ?>
                                <a class="divtext2" href="<?= $infos['Lien_News'] ?>" target="_blank"><i class="far fa-file-pdf fa-3x" style="color:#FF0000"></i></a>
                            <?php
                            }
                            ?>
                            <div class="divtext2"><?= "Date de publication: " . $infos['Date_News'] . " par : " . $infos['Type_Long'] ?></div>
                        </form>
                    <?php
                    }
                    ?>

Vraiment mieux comme ça

11 avr. 2021, 15:47

ça sert à quoi ?
<form>
</form>

11 avr. 2021, 23:01

A rien en effet remplacer une div.

11 avr. 2021, 23:16

.divtext{
width: 5;
text-decoration: underline rgb(200, 16, 46);
background-color:rgb(224, 205, 169,0.5);
}
.divtext2{
width: 5;
background-color:rgb(224, 205, 169,0.5);
}

soit plein de choses redondantes.
en englobant le tout dans un div et en appliquant un style à ce div, il y a moyen de ne pas avoir de redondances dans la feuille de style.

les balises html donnent du sens au contenu, donc ne mettre que des div n'est pas une bonne idée.

12 avr. 2021, 09:48

Bonjour

et comme ça pour le css ?

Code : Tout sélectionner

.divform {
   color: rgb(0, 26, 114);
   margin: 1em;
   padding:1em;
   border-radius: 3em;
   background-color:rgba(250,250,210,0.4)
}
.resize{
   resize: block;
   overflow: auto;
   height: 100px;
   
} 
.divtext{
   text-decoration: underline rgb(200, 16, 46);
}
.divtext2{
   margin-left: 1em;
}
.navgauchedroite{
   border-radius: 3em;
   color: rgb(0, 26, 114);
   background-color:rgba(250,250,210,0.3)
}

et le html ?

Code : Tout sélectionner

<?php
                    foreach ($resultatNews as $infos) {
                    ?>
                        <div class="divform">
                            <p class="divtext divtext2"><?= $infos['Type_Article'] ?></p>
                            <p class="divtext2"><?= $infos['Titre_News'] ?></p>
                            <p class="resize divtext2"><?= $infos['Commentaires_News'] ?></p>
                            <?php
                            if (isset($infos['Lien_News']) && !empty($infos['Lien_News'])) {
                            ?>
                                <a class="divtext2" href="<?= $infos['Lien_News'] ?>" target="_blank"><i class="far fa-file-pdf fa-3x" style="color:#FF0000"></i></a>
                            <?php
                            }
                            ?>
                            <p class="divtext2"><?= "Date de publication: " . $infos['Date_News'] . " par : " . $infos['Type_Long'] ?></p>
                        </div>
                    <?php
                    }
                    ?>

12 avr. 2021, 12:52

c'est mieux.

<p class="divtext2"><?= $infos['Titre_News'] ?></p>
comme l'indique le nom du champ, c'est un titre, or il y a des balises html pour un titre qu'il est donc préférable d'utiliser plutôt qu'un <p>.

12 avr. 2021, 13:30

Comme ça?

Code : Tout sélectionner

<title class="divtext divtext2"><?= $infos['Type_Article'] ?></title>

12 avr. 2021, 13:52

non
https://developer.mozilla.org/fr/docs/W ... ment/title
"L'élément <title> est toujours utilisé au sein de l'élément <head> de la page."

[RESOLU] Lien cliquable dans un champ de formulaire

Qui est en ligne