nom d'utilisateur et le mot de passe de validation en HTML

Puisque vous êtes nouveau sur le développement web, j'ai décidé de poster cette réponse, que vous seriez utile conseille.
Mais d'abord, je suis curieux de savoir si vous êtes à l'aide d'un tutoriel. Si vous êtes à l'aide d'un tutoriel, s'il vous plaît regarder pour une autre depuis votre HTML contient des "anciens" balises.

Ce post contient trois parties: HTML, CSS, JavaScript.

HTML

Commençons avec le HTML. Voici un exemple de ce que vous avez écrit:

<font size=5>
    <font color="black">
        <input type="text" placeholder="Username" name="text1">
        <br /><br />
    </font>

Lorsque vous souhaitez utiliser une balise, vous pouvez l'ouvrir en <tagname>. Mais certaines balises exiger que vous avez pour la fermer. Vous pouvez fermer une balise avec </tagname>

Cet exemple est un mauvais exemple

<div>
    //other inner HTML tags

C'est un bon exemple:

<div>
    //other inner HTML tags.
</div>

Vous pouvez voir que j'ai ajouté </div> pour fermer la div-élément. Les navigateurs modernes est en mesure de "résoudre" pour vous, lors de l'analyse du HTML par le biais du DOM, mais il est préférable de le faire vous-même.

Cependant, il y a des balises qui contient plusieurs attributs. Comme l'élément d'entrée.

<input type="text" placeholder="Username" name="text1" />

Remarquez l'ajout / à la fin de la balise. Je recommande aussi à un choix de nom pour le champ de saisie. Si vous vous attendez à être utilisé pour le nom d'utilisateur, veuillez appeler par "nom d'utilisateur". Voici un exemple amélioré:

<input type="text" placeholder="Username" name="username" id="username" />

Si vous souhaitez en savoir plus sur le langage HTML, veuillez lire ce la documentation sur HTML. Essayez d'éviter les vieux (pas plus utilisé) les balises comme <font> ou même <! javascript>. Où avez-vous creusé ce que c'est?

À propos de CSS

Vous avez utilisé <font> dans votre code HTML. Comme dit dans la section précédente, il n'est plus utilisé. Le style du HTML, nous sommes à l'aide de CSS maintenant. Que signifie "Feuilles de Style en Cascade", qui vous permet de vous style un simple document HTML dans une jolie page web. Si vous souhaitez en savoir plus à propos de css, vous pouvez utiliser cette la documentation.

Dans le css, si vous voulez le style de la police de caractères, vous pouvez utiliser par exemple

input[type="text"] {
    color: red;
}

Cette CSS partie dit "de recherche pour input[type="text"] éléments". Puis la couleur la couleur du texte en rouge. C'est un exemple simple. En utilisant le CSS, vous pouvez manipuler l'apparence de votre page web.
Si vous voulez en savoir plus à propos de CSS, veuillez utiliser le donné de la documentation, ou d'utiliser ce tutoriel.

À Propos De JavaScript

Ce que vous avez entré est bonne, mais vous avez encore besoin de vérifier pour les bases. Regardons à votre première fonction: valider.

function validate(text1,text2)
{
    if(text1==workshop && text2==workshop)
        load("run.html");
    else
    {
        load("fail.html");
    }
}

Votre état partie est text1==workshop && text2==workshop. Les variables text1 et text2 est connu (adoptée par la fonction comme argument). Mais qu'en est workshop ? Vous avez défini quelque part ? Si non, alors ce code serait un échec, parce que le script va chercher une variable workshop qui n'existe pas.

Je suppose que vous voulez rechercher par nom de chaîne:

text1=="workshop"

Qui est valide à condition de vérifier. Le script va voir si text1 correspond à la chaîne.

Maintenant, à propos de style de codage. Vous êtes tout d'abord pas à l'aide de { et } à la première si, mais vous, qu'à votre autre. Essayez de manipuler un style de codage. Soit vous utilisez { et } à la fois ou pas même un seul.

Par exemple, avec { et }:

if(text1=="workshop" && text2=="workshop") {
    load("run.html");
}
else {
    load("fail.html");
}

Ou sans

if(text1==workshop && text2==workshop)
    load("run.html");
else
    load("fail.html");

Les deux sont mieux lisible, alors que vous avez entré. Si votre état de bloc est multi-ligne, vous devez utiliser { et } de cours.

if( condition ) {
    //line 1
    //line 2
}

Cela signifie que ligne1 et ligne2 sera exécuté que si la condition est vrai.

Maintenant, l'utilisation de fonction. Vous avez utilisé

function load(url)
{
    location href=url;
}

Cette fonction ne fonctionne pas. Il vous donnera une erreur d'exécution. location.href est ce que vous avez besoin. Si vous souhaitez utiliser JavaScript natif fonctions, vérifiez que vous avez nommé correctement.

Revenir à votre question. Vous voulez vérifier les données saisies lorsque vous avez cliqué sur le bouton. C'est possible en utilisant des "événements". Vous avez utilisé onclick dans la balise button

<input type="submit" value="Login" onclick="validate()" />

Ne vous inquiétez pas, cela va fonctionner. (je ne suis pas un fan de ce style). Si vous cliquez sur le bouton, vous lancez le "valider()" de la fonction. Il n'est pas nécessaire d'ajouter "javascript" avant de. Le DOM peut le manipuler. Le nom de la fonction et son argument doit être la même que la chaîne saisie dans le onclick attribut. Si vous ne le faites pas, le script va rechercher un non d'une fonction existante, ce qui conduit à une erreur.
Puisque nous sommes à l'aide de valider sans arguments, nous devons redéfinir la fonction comme ci-dessous.

function validate()
{
    if(text1=="workshop" && text2=="workshop")
        //code omitted
}

Rappelons que text1 est une variable et définie. Car ce ne sont pas passés par les méthodes d'argument, vous devez sélectionner les balises input, pour s'assurer que vous pouvez obtenir les données nécessaires. Cela peut être fait par document.getElementById() fonction, qui permet de sélectionner un élément par son id.

var text1 = document.getElementById("username");

Ce dit "obtenir l'élément par son id: nom d'utilisateur". Veuillez consulter la section HTML de l'exemple. Vous pouvez trouver que l'élément d'entrée a une id="username" attribut.

Mais nous n'y sommes pas encore ! La fonction document.getElementById vous donne un nœud de l'élément avec l'ID donné.
Puisque l'élément est un champ de saisie, vous pouvez utiliser le .value propriété pour obtenir sa valeur actuelle. Faire de même pour texte2 (le champ mot de passe, alors vous avez un travail de la fonction !

function validate()
{
    var text1 = document.getElementById("username");
    var text2 = document.getElementById("password");
    if(text1.value=="workshop" && text2.value=="workshop") {
        load("run.html");
    }
    else {
        load("fail.html");
    }
}

Il y a d'autres façons de sélectionner vos balises dans le document: getElementByClassName, querySelector, querySelectorAll et plus. Veuillez consulter sa documentation de la façon dont il fonctionne.

C'est tout ce dont vous avez besoin pour vous assurer que votre code fonctionne.
Si vous voulez en savoir plus à propos de javascript, veuillez lire ce la documentation. Ou commencer à apprendre les notions de base en utilisant ce tutoriel.

S'il vous plaît ne pas copier-coller de ma réponse directement. Essayez d'en apprendre plus sur le web en développement. C'est un monde merveilleux et il peut vous aider plus.

Mais, encore une note de côté: vous êtes à la validation des données côté client. Je ne recommanderais pas que parce que c'est pas de coffre-fort de sécurité. Habituellement, le formulaire doit être soumis à un serveur, ce qui valide le formulaire. Si les données saisies est valide, le serveur redirige l'utilisateur vers la page de droite. Cela peut être fait avec PHP, ASP.NET, ...

exemple complet

JS:

    function validate() {
      var text1 = document.getElementById("username");
      var text2 = document.getElementById("password");
      if (text1.value == "workshop" && text2.value == "workshop") {
        load("run.html");
      } else {
        load("fail.html");
      }
    }

    function load(url) {
      location.href = url;
    }

CSS:

input[type="text"] {
  color: red;
}

HTML:

<form>
  <input type="text" placeholder="Username" name="username" id="username" />
  <br />
  <br />
  <input type="password" placeholder="Password" name="password" id="password" />
  <br />
  <br />
  <input type="submit" value="Login" onclick="validate()" />
</form>

HTML:

<form>
    <input type="text" placeholder="Username" id="text1" /><br />
    <input type="password" placeholder="Password" id="text2" /><br />
    <input type="button" value="Login"  onclick="javascript:validate()" />
</form>
<script type="text/javascript">
function validate()
{
    if(   document.getElementById("text1").value == "workshop"
       && document.getElementById("text2").value == "workshop" )
    {
        alert( "validation succeeded" );
        location.href="run.html";
    }
    else
    {
        alert( "validation failed" );
        location.href="fail.html";
    }
}
</script>