Comment ajuster la taille du formulaire à l'aide de Golang-Golang-php.cn

Comment ajuster la taille du formulaire à l'aide de Golang

PHPz

Libérer： 2023-03-30 09:45:17

original

735 Les gens l'ont consulté

Lors de la rédaction d'un formulaire en Golang, la taille du formulaire doit parfois être ajustée. Comment y parvenir ? Cet article vous le présentera.

Utiliser CSS

Dans le développement front-end, nous utilisons généralement CSS pour styliser les formulaires. En Golang, nous pouvons définir le style du formulaire via "style" dans le package "html/template". Voici un exemple :

// 定义模板
tmpl := `<html><head><style>.my-form { width: 500px; height: 600px; }</style></head><body><form class="my-form">{{.}}</form></body></html>`
// 填充模板
t := template.Must(template.New("mytemplate").Parse(tmpl))
// 设置表单数据
form := "这里是表单内容"
// 输出结果
t.Execute(w, template.HTML(form))

Copier après la connexion

Dans l'exemple ci-dessus, nous avons utilisé CSS pour définir la largeur du formulaire à 500px et la hauteur à 600px. Il convient de noter que nous utilisons "{{.}}" dans le modèle pour indiquer l'insertion de données de formulaire.

Utilisation de JavaScript

Si vous devez définir dynamiquement la taille du formulaire dans Golang, nous pouvons utiliser JavaScript. Tout d'abord, introduisez le fichier JavaScript dans le modèle :

tmpl := `<html><head><script src="/static/js/my-js.js"></script></head><body><form>{{.}}</form></body></html>`
t := template.Must(template.New("mytemplate").Parse(tmpl))
form := "这里是表单内容"
t.Execute(w, template.HTML(form))

Copier après la connexion

Ensuite, définissez la taille du formulaire dans le fichier JavaScript :

var form = document.getElementsByTagName("form")[0];
form.style.width = "500px";
form.style.height = "600px";

Copier après la connexion

Dans l'exemple ci-dessus, nous obtenons d'abord le premier élément du formulaire, puis utilisons "style" pour définir la largeur. du formulaire est de 500px et la hauteur est de 600px.

Utilisation de Bootstrap

Bootstrap est un framework frontal populaire qui fournit de nombreux composants CSS et JavaScript pour la mise en page et le style des formulaires. Si vous souhaitez créer rapidement de beaux formulaires, utilisez Bootstrap.

Tout d'abord, vous devez introduire le fichier Bootstrap dans le modèle :

tmpl := `<html><head><link rel="stylesheet" href="/static/css/bootstrap.min.css"><script src="/static/js/bootstrap.min.js"></script></head><body>{{.}}</body></html>`
t := template.Must(template.New("mytemplate").Parse(tmpl))
form := "这里是表单内容"
t.Execute(w, template.HTML(form))

Copier après la connexion

Ensuite, vous pouvez utiliser les classes "container-fluid" et "row" fournies par Bootstrap pour créer une mise en page de formulaire responsive. Voici un exemple :

<form>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <input type="text" class="form-control" placeholder="请输入您的姓名">
      </div>
      <div class="col-md-6 col-sm-12">
        <input type="text" class="form-control" placeholder="请输入您的电话号码">
      </div>
    </div>
  </div>
</form>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons créé une mise en page de formulaire réactif en utilisant les classes "container-fluid" et "row". Utilisez les classes "col-md-6" et "col-sm-12" pour disposer les éléments de formulaire sur différents appareils.

Résumé :

Il existe trois façons ci-dessus de définir la taille du formulaire dans Golang. Vous pouvez choisir la méthode qui vous convient pour l'ajuster. L'utilisation de CSS est relativement simple, mais des conflits de style surviennent parfois ; l'utilisation de JavaScript peut ajuster dynamiquement la taille du formulaire, mais vous devez écrire du code supplémentaire ; l'utilisation de Bootstrap peut rapidement créer de beaux formulaires, mais vous devez acquérir de nouvelles connaissances. J'espère que cet article pourra vous aider à mieux utiliser Golang pour rédiger des formulaires.

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!