Petit Pb en HTML

International Français
1

Re bonjour à tous,
J'ai un petit souci avec HTML et la taille de police d'un Input string.
j'essaye en vain de modifier la taille de la police de ces inputs, sans aucun résultat. Seul le texte est affecté.
Je joint le bout de code :`

webpage += "<form method=POST>";
        webpage += "<table style='font-family:arial,sans-serif;font-size:20px;border-collapse:collapse;text-align:left;width:100%;margin-left:0;margin-right:0;'>";
        webpage += "<tr>";
        webpage += "<th style='border:0px solid black;text-align:left;padding:2px;'>V1-1 H dep</th>";          //heure depart
        webpage += "<th style='border:0px solid black;text-align:left;padding:2px;'>V1-1 Mn dep</th>";         //minute depart
        webpage += "<th style='border:0px solid black;text-align:left;padding:2px;'>V1-1 H stop</th>";            //heure stop
        webpage += "<th style='border:0px solid black;text-align:left;padding:2px;'>V1-1 Mn stop</th>";           //minute stop
        webpage += "</tr>";
        
        webpage += "<tr>";
        webpage += "<td style='border:0px solid black;text-align:left;padding:2px;'><input type='text' name='v11hd' value=" + String(v11hd) + "></td>"; //consigne redox
        webpage += "<td style='border:0px solid black;text-align:left;padding:2px;'><input type='text' name='v11md' value=" + String(v11md) + "></td>"; //temps de marche vanne redox
        webpage += "<td style='border:0px solid black;text-align:left;padding:2px;'><input type='text' name='v11hs' value=" + String(v11hs) + " ></td>";   //temps de repos vanne redox
        webpage += "<td style='border:0px solid black;text-align:left;padding:2px;'><input type='text' name='v11ms' value=" + String(v11ms) + " ></td>";
        webpage += "</tr>";

C'est la taille de police de l'input "String(v11hd) " que je souhaite agrandir !

2

Tout d’abord, utilisez des « styles » en définissant des classes à utiliser dans les objets HTML. Cela évite de devoir répéter plusieurs fois la même chaîne. Mettez ceci en haut de votre page (ex. à l'intérieur de "head") :

<style>
.tableclass {font-family:arial,sans-serif;font-size:20px;border-collapse:collapse;text-align:left;width:100%;margin-left:0;margin-right:0;}
.headcell {border:0px solid black;text-align:left;padding:2px;font-size:20px;}
.textcell {font-size:20px;}
</style>

Avec cette balise, vous définissez trois classes de style.

Deuxièmement, vous devez spécifier la taille du texte dans les attributs "input tag". Vous devez également mettre la valeur à l'intérieur du délimiteur "'" (apostrophe).

Si vous utilisez le "style" que j'ai indiqué, essayez ce code :

	webpage += "<style>";
	webpage += ".tableclass {font-family:arial,sans-serif;font-size:20px;border-collapse:collapse;text-align:left;width:100%;margin-left:0;margin-right:0;}";
	webpage += ".headcell {border:0px solid black;text-align:left;padding:2px;font-size:20px;}";
	webpage += ".textcell {font-size:20px;}";
	webpage += "</style>";
	webpage += "<form method=POST>";
	webpage += "<table class='tableclass'><tr>";
	webpage += "<th class='headcell'>V1-1 H dep</th>";
	webpage += "<th class='headcell'>V1-1 Mn dep</th>";
	webpage += "<th class='headcell'>V1-1 H stop</th>";
	webpage += "<th class='headcell'>V1-1 Mn stop</th>";
	webpage += "</tr><tr>";
	webpage += "<td><input type='text' class='textcell' name='v11hd' value='" + String(v11hd) + "'></td>";
	webpage += "<td><input type='text' class='textcell' name='v11md' value='" + String(v11md) + "'></td>";
	webpage += "<td><input type='text' class='textcell' name='v11hs' value='" + String(v11hs) + "'></td>";
	webpage += "<td><input type='text' class='textcell' name='v11ms' value='" + String(v11ms) + "'></td>";
	webpage += "</tr>";
3

essayez

<!DOCTYPE html>
<html>
<head>
    <title>Formulaire</title>
    <style>
        .table-cell {
            border: 1px solid black;
            text-align: left;
            padding: 2px;
            font-size: 36px;
        }

        .large-text-input {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <form method="POST">
        <table style="font-family: arial, sans-serif; border-collapse: collapse; text-align: left; width: 100%; margin-left: 0; margin-right: 0;">
            <tr>
                <th class="table-cell">V1-1 H dep</th>
                <th class="table-cell">V1-1 Mn dep</th>
                <th class="table-cell">V1-1 H stop</th>
                <th class="table-cell">V1-1 Mn stop</th>
            </tr>

            <tr>
                <td class="table-cell"><input type="text" name="v11hd" value="" class="large-text-input"></td>
                <td class="table-cell"><input type="text" name="v11md" value="" class="large-text-input"></td>
                <td class="table-cell"><input type="text" name="v11hs" value="" class="large-text-input"></td>
                <td class="table-cell"><input type="text" name="v11ms" value="" class="large-text-input"></td>
            </tr>
        </table>
        
        <input type="submit" value="Envoyer">
    </form>
</body>
</html>
4

comme dit précédemment dans une autre discussion (vous devriez utiliser le même fil pour des questions liées) ce serait quand même plus sympa d'utiliser un field de type time.

ça pourrait ressembler de manière brute à cela

image
image1552×1286 118 KB

la page web pourrait être définie sous forme de squelette qui ne change pas, le contenu serait lui dynamique. Une requête AJAX irait chercher sur le serveur arduino la liste des actions sous format JSON

[
  {"nom": "Action 1", "debut": [10, 20],  "fin": [11, 20] },
  {"nom": "Action 2", "debut": [17, 30],  "fin": [18, 30] }
]

et utiliserait javascript pour bâtir l'affichage dynamiquement.

un appui sur la mise à jour d'une ligne pourrait ne renvoyer qu'un seul petit JSON avec

  {"nom": "Action 1", "debut": [10, 20],  "fin": [11, 20] },

et le bouton modifier tout renverrait la totale.

5

Ok, Grand merci.

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.