Bagaimana untuk menyesuaikan saiz borang menggunakan golang-Golang-php.cn

Bagaimana untuk menyesuaikan saiz borang menggunakan golang

PHPz

Lepaskan： 2023-03-30 09:45:17

asal

703 orang telah melayarinya

Apabila menulis borang menggunakan golang, kadangkala anda perlu melaraskan saiz borang. Bagaimana untuk mencapai ini? Artikel ini akan memperkenalkannya kepada anda.

Menggunakan CSS

Dalam pembangunan bahagian hadapan, kami biasanya menggunakan CSS untuk menggayakan borang. Dalam golang, kita boleh menetapkan gaya borang melalui "gaya" dalam pakej "html/template". Berikut ialah contoh:

// 定义模板
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))

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan CSS untuk menetapkan lebar borang kepada 500px dan ketinggian kepada 600px. Perlu diingat bahawa kami menggunakan "{{.}}" dalam templat untuk menunjukkan memasukkan data borang.

Gunakan JavaScript

Jika anda perlu menetapkan saiz borang secara dinamik dalam golang, kami boleh menggunakan JavaScript. Mula-mula, masukkan fail JavaScript ke dalam templat:

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))

Salin selepas log masuk

Kemudian, tetapkan saiz borang dalam fail JavaScript:

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

Salin selepas log masuk

Dalam contoh di atas, kita mula-mula mendapatkan borang pertama elemen, dan kemudian gunakan "gaya" untuk menetapkan lebar borang kepada 500px dan ketinggian kepada 600px.

Menggunakan Bootstrap

Bootstrap ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak komponen CSS dan JavaScript untuk reka letak dan penggayaan borang. Jika anda ingin mencipta borang yang cantik dengan cepat, gunakan Bootstrap.

Pertama, anda perlu memperkenalkan fail Bootstrap dalam templat:

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))

Salin selepas log masuk

Kemudian, anda boleh menggunakan kelas "bendalir bekas" dan "baris" yang disediakan oleh Bootstrap untuk mencipta Susun atur Borang responsif. Berikut ialah contoh:

<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>

Salin selepas log masuk

Dalam contoh di atas, kami mencipta reka letak borang responsif menggunakan kelas "bendalir bekas" dan "baris". Gunakan kelas "col-md-6" dan "col-sm-12" untuk susun atur elemen bentuk pada peranti yang berbeza.

Ringkasan:

Di atas adalah tiga cara untuk menetapkan saiz borang dalam golang Anda boleh memilih kaedah yang sesuai untuk anda laraskan. Menggunakan CSS agak mudah, tetapi konflik gaya kadangkala berlaku; menggunakan JavaScript boleh melaraskan saiz borang secara dinamik, tetapi anda perlu menulis beberapa kod tambahan menggunakan Bootstrap boleh membuat borang yang cantik dengan cepat, tetapi anda perlu mempelajari beberapa pengetahuan baharu; Saya harap artikel ini dapat membantu anda menggunakan golang untuk menulis borang dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan saiz borang menggunakan golang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!