{"id":11286,"date":"2024-03-14T13:45:08","date_gmt":"2024-03-14T13:45:08","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/"},"modified":"2025-08-04T09:53:05","modified_gmt":"2025-08-04T09:53:05","slug":"what-is-the-method-for-initializing-and-assigning-values-in-layui-forms","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/","title":{"rendered":"Layui Form Initialization Guide"},"content":{"rendered":"

In layui form, you can use the form.val() method to initialize form values. The specific steps are as follows:<\/p>\n

    \n
  1. Import the layui library file.<\/li>\n<\/ol>\n
    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"path\/to\/layui\/css\/layui.css\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"path\/to\/layui\/layui.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n<\/code><\/pre>\n
      \n
    1. Write code for the form<\/li>\n<\/ol>\n
      <form<\/span> class<\/span>=\"layui-form\"<\/span> action<\/span>=\"\"<\/span>><\/span>\r\n  <div<\/span> class<\/span>=\"layui-form-item\"<\/span>><\/span>\r\n    <label<\/span> class<\/span>=\"layui-form-label\"<\/span>><\/span>\u7528\u6237\u540d<\/label<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"layui-input-block\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"username\"<\/span> lay-verify<\/span>=\"required\"<\/span> placeholder<\/span>=\"\u8bf7\u8f93\u5165\u7528\u6237\u540d\"<\/span> autocomplete<\/span>=\"off\"<\/span> class<\/span>=\"layui-input\"<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n  <\/div<\/span>><\/span>\r\n  <div<\/span> class<\/span>=\"layui-form-item\"<\/span>><\/span>\r\n    <label<\/span> class<\/span>=\"layui-form-label\"<\/span>><\/span>\u5bc6\u7801<\/label<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"layui-input-block\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"password\"<\/span> name<\/span>=\"password\"<\/span> lay-verify<\/span>=\"required\"<\/span> placeholder<\/span>=\"\u8bf7\u8f93\u5165\u5bc6\u7801\"<\/span> autocomplete<\/span>=\"off\"<\/span> class<\/span>=\"layui-input\"<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n  <\/div<\/span>><\/span>\r\n  <div<\/span> class<\/span>=\"layui-form-item\"<\/span>><\/span>\r\n    <button<\/span> class<\/span>=\"layui-btn\"<\/span> lay-submit<\/span> lay-filter<\/span>=\"formDemo\"<\/span>><\/span>\u7acb\u5373\u63d0\u4ea4<\/button<\/span>><\/span>\r\n  <\/div<\/span>><\/span>\r\n<\/form<\/span>><\/span>\r\n<\/code><\/pre>\n
        \n
      1. Initialize form values using the form.val() method.<\/li>\n<\/ol>\n
        layui.use<\/span>('form'<\/span>, function<\/span>(<\/span>){\r\n  var<\/span> form = layui.form<\/span>;\r\n  \r\n  \/\/ \u521d\u59cb\u5316\u8868\u5355\u8d4b\u503c<\/span>\r\n  form.val<\/span>('formDemo'<\/span>, {\r\n    \"username\"<\/span>: \"test\"<\/span>,\r\n    \"password\"<\/span>: \"123456\"<\/span>\r\n  });\r\n});\r\n<\/code><\/pre>\n
        The method form.val(‘formDemo’, data) in the above code will assign the data in the data object to the input box corresponding to the name attribute in the form. This way, form data can be automatically filled when the page loads.<\/p>\n","protected":false},"excerpt":{"rendered":"
        In layui form, you can use the form.val() method to initialize form values. The specific steps are as follows: Import the layui library file. <link rel=”stylesheet” href=”path\/to\/layui\/css\/layui.css”> <script src=”path\/to\/layui\/layui.js”><\/script> Write code for the form <form class=”layui-form” action=””> <div class=”layui-form-item”> <label class=”layui-form-label”>\u7528\u6237\u540d<\/label> <div class=”layui-input-block”> <input type=”text” name=”username” lay-verify=”required” placeholder=”\u8bf7\u8f93\u5165\u7528\u6237\u540d” autocomplete=”off” class=”layui-input”> <\/div> <\/div> <div class=”layui-form-item”> <label […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[14511,14509,14508,14510,14512],"class_list":["post-11286","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-form-assignment","tag-form-val","tag-layui-form","tag-layui-initialization","tag-layui-javascript"],"yoast_head":"\nLayui Form Initialization Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to initialize and assign values in Layui forms using the form.val() method. Complete guide with code examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Layui Form Initialization Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to initialize and assign values in Layui forms using the form.val() method. Complete guide with code examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T13:45:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-04T09:53:05+00:00\" \/>\n<meta name=\"author\" content=\"Isabella Edwards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabella Edwards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/\"},\"author\":{\"name\":\"Isabella Edwards\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd\"},\"headline\":\"Layui Form Initialization Guide\",\"datePublished\":\"2024-03-14T13:45:08+00:00\",\"dateModified\":\"2025-08-04T09:53:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/\"},\"wordCount\":84,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"form assignment\",\"form.val()\",\"layui form\",\"layui initialization\",\"layui javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/\",\"name\":\"Layui Form Initialization Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T13:45:08+00:00\",\"dateModified\":\"2025-08-04T09:53:05+00:00\",\"description\":\"Learn how to initialize and assign values in Layui forms using the form.val() method. Complete guide with code examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layui Form Initialization Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd\",\"name\":\"Isabella Edwards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g\",\"caption\":\"Isabella Edwards\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/isabellaedwards\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Layui Form Initialization Guide - Blog - Silicon Cloud","description":"Learn how to initialize and assign values in Layui forms using the form.val() method. Complete guide with code examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/","og_locale":"en_US","og_type":"article","og_title":"Layui Form Initialization Guide","og_description":"Learn how to initialize and assign values in Layui forms using the form.val() method. Complete guide with code examples.","og_url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T13:45:08+00:00","article_modified_time":"2025-08-04T09:53:05+00:00","author":"Isabella Edwards","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Isabella Edwards","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/"},"author":{"name":"Isabella Edwards","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd"},"headline":"Layui Form Initialization Guide","datePublished":"2024-03-14T13:45:08+00:00","dateModified":"2025-08-04T09:53:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/"},"wordCount":84,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["form assignment","form.val()","layui form","layui initialization","layui javascript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/","url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/","name":"Layui Form Initialization Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T13:45:08+00:00","dateModified":"2025-08-04T09:53:05+00:00","description":"Learn how to initialize and assign values in Layui forms using the form.val() method. Complete guide with code examples.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-initializing-and-assigning-values-in-layui-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Layui Form Initialization Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd","name":"Isabella Edwards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g","caption":"Isabella Edwards"},"url":"https:\/\/www.silicloud.com\/blog\/author\/isabellaedwards\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/11286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=11286"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/11286\/revisions"}],"predecessor-version":[{"id":155058,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/11286\/revisions\/155058"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=11286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=11286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=11286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}