est créé, un bouton l'est. également créé sur la page Web. Ce que nous voulons dire maintenant, c'est quelle est la différence entre cette étiquette de bouton et l'étiquette de l'entrée ? Bien sûr, cette balise nous offre des fonctions plus puissantes. Nous pouvons définir le bouton, définir le texte sur le bouton et même charger des images et autres éléments multimédias. En HTML5, la balise bouton a ajouté certains attributs, tels que l'autofocus, dis."/> est créé, un bouton l'est. également créé sur la page Web. Ce que nous voulons dire maintenant, c'est quelle est la différence entre cette étiquette de bouton et l'étiquette de l'entrée ? Bien sûr, cette balise nous offre des fonctions plus puissantes. Nous pouvons définir le bouton, définir le texte sur le bouton et même charger des images et autres éléments multimédias. En HTML5, la balise bouton a ajouté certains attributs, tels que l'autofocus, dis.">
recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'utilisation de la balise

Explication détaillée de l'utilisation de la balise

黄舟
黄舟original
2017-06-20 13:40:569945parcourir

Introduction aux boutons bouton : Vous savez : le bouton consiste à définir un bouton, mais il existe également un bouton qui peut être défini dans le formulaire. Nous savons que lorsque , un bouton est. également créé sur la page Web. Ce dont je veux parler maintenant, c'est de la différence entre l'étiquette du bouton et l'étiquette dans l'entrée. Bien sûr, cette balise nous offre des fonctions plus puissantes. Nous pouvons définir le bouton, définir le texte sur le bouton, et même charger des images, etc. Multimédia En HTML5, la balise bouton a ajouté quelques attributs, tels que autofocus, désactivé, formulaire, formation, formenctype, formmethod, fornovalidate, formtarget, name, type, value Faisons quelques petits cas pour illustrer cette balise

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title></title>
</head>
<body>
   <button type="button">这是一个按钮</button>
    <hr/>
   <br/>
   <!-- 这个地方告诉我们在button之间的文本都会写到button这个按钮上面 -->
   <button type="button">
   <img  src="https://www.baidu.com/img/bd_logo1.png"    style="max-width:90%"  style="max-width:90%" alt="Explication détaillée de l'utilisation de la balise <button> en HTML" >
   </button>
   <!-- 这一个部分告诉我们可以将按钮设置为图画，在按钮上增加图片 -->
   <hr/>
   <button type="button" autofocus="autofocus">已经获得焦点</button>


   <!--这个地方定义一个获得焦点的按钮，获得焦点就和鼠标在上面滑动一样-->
   <hr/>
   <button type="button" disabled="disabled">失效</button>
   <!-- 在这个地方定义一个失效的按钮，已经禁用，其实就是在button中增加一个属性
   并且将值设置为disabled -->
    <form action="http://www.w3school.com.cn/example/html/form_action.asp"
    method="get">
    请选择你喜爱的项目:
    <button name="subject" type="submit" value="HTML">HTML</button>
    <button name="subject" type="subject" value="CSS">CSS</button>
     </form>
        <!--在这个地方用到form和button进行结合使用，其实form提供的是
        一个来链接，button的属性是提交submit，而且method方法是得到
        应该注意的是button标签尽量少和form一起使用，因为不同的浏览器提交的
        内容是不同的，有的 是value的值，有的 是button之间的内容  -->


</body>
</html>

1. >

Les boutons normaux doivent généralement être combinés avec des scripts

JavaScript pour implémenter le formulaire.

Syntaxe : 

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
Description :


La valeur de value est le texte affiché sur le bouton, onclick est l'événement du bouton ordinaire, on faisons cela Cela sera expliqué en détail dans le didacticiel d'introduction à JavaScript, donc tout le monde peut le comprendre ici.

Par exemple : 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    单击按钮弹出对话框：<br/>
    <input type="button" value="按钮" onclick="alert(&#39;你点击了按钮！&#39;)">
</body>
</html>
L'effet d'aperçu dans le navigateur est le suivant :

Explication détaillée de lutilisation de la balise <button> en HTML

Ensuite, lorsque vous cliquez sur le bouton, une boîte de dialogue apparaîtra :

Explication détaillée de lutilisation de la balise <button> en HTML

2. Bouton Soumettre soumettre

Le bouton Soumettre peut être considéré comme un bouton ordinaire avec des fonctions spéciales en cliquant sur Soumettre. Le bouton peut soumettre le contenu du formulaire au serveur pour traitement.

Syntaxe : 

<input type="submit" value="提交按钮的取值"/>
Description :


La valeur de value est le texte affiché sur le bouton. Voir l'exemple dans Bouton de réinitialisation pour un exemple.

La véritable utilité du bouton de soumission ne peut être vraiment comprise tant que nous n'avons pas appris la technologie back-end.

3. Réinitialisation du bouton de réinitialisation

Le bouton de réinitialisation peut également être considéré comme un bouton ordinaire avec des fonctions spéciales. Cliquer sur le bouton de réinitialisation peut effacer les informations saisies par l'utilisateur dans le formulaire de page.

Syntaxe : 

<input type="reset" value="重置按钮的取值"/>
Description :


La valeur de value est le texte affiché sur le bouton.

Par exemple : 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        账号：<input type="text"/><br/>
        密码：<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>
L'effet d'aperçu dans le navigateur est le suivant :

Explication détaillée de lutilisation de la balise <button> en HTML

Vous saisissez des caractères >Après cela, appuyez sur le bouton de réinitialisation et vous constaterez que le contenu de la zone de texte est effacé ! C'est ce que fait le bouton de réinitialisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser la balise
et sa fonction en html ?Article suivant：Comment utiliser la balise
et sa fonction en html ?

Articles Liés

Voir plus