用HTML和CSS创建美观而有用的表单

如今，无论你是在线购物、提交查询还是创建新帐户，你都不可避免地会遇到各种各样的表单。表单是用户与网站交互的必经之路，而精美的表单设计更是让人赏心悦目，使用起来得心应手。

HTML 表单基础

HTML5 为我们提供了多种表单控件，包括文本框、密码框、单选按钮、复选框、下拉菜单等等。这些控件允许用户输入各种类型的数据，从简单的文本到复杂的日期和时间。

使用 元素创建文本框

文本框是表单中最常见的元素，用于输入单行文本。要创建文本框，可以使用 元素，并指定 type="text"。例如：

<input type="text" name="username" placeholder="用户名">

使用 元素创建文本域</h3> <p>文本域用于输入多行文本。要创建文本域，可以使用 <textarea> 元素。例如：</p> <pre><code class="hljs"><textarea <span class="hljs-attribute">name</span>=<span class="hljs-string">"address"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-string">"地址"</span>></textarea> </code></pre> <h3>使用 <select> 元素创建下拉菜单</h3> <p>下拉菜单用于提供一组选项，让用户从中选择。要创建下拉菜单，可以使用 <select> 元素。例如：</p> <pre><code class="hljs"><<span class="hljs-keyword">select</span> <span class="hljs-type">name</span>="country"> <<span class="hljs-keyword">option</span> <span class="hljs-keyword">value</span>="china">中国</<span class="hljs-keyword">option</span>> <<span class="hljs-keyword">option</span> <span class="hljs-keyword">value</span>="usa">美国</<span class="hljs-keyword">option</span>> <<span class="hljs-keyword">option</span> <span class="hljs-keyword">value</span>="japan">日本</<span class="hljs-keyword">option</span>> </<span class="hljs-keyword">select</span>> </code></pre> <h3>使用 <input> 元素创建单选按钮和复选框</h3> <p>单选按钮用于让用户从一组选项中选择一个。要创建单选按钮，可以使用 <input> 元素，并指定 type="radio"。例如：</p> <pre><code class="hljs"><input <span class="hljs-attribute">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attribute">value</span>=<span class="hljs-string">"male"</span>> 男 <input <span class="hljs-attribute">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attribute">value</span>=<span class="hljs-string">"female"</span>> 女 </code></pre> <p>复选框用于让用户从一组选项中选择多个。要创建复选框，可以使用 <input> 元素，并指定 type="checkbox"。例如：</p> <pre><code class="hljs"><input <span class="hljs-attribute">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-string">"hobby"</span> <span class="hljs-attribute">value</span>=<span class="hljs-string">"reading"</span>> 读书 <input <span class="hljs-attribute">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-string">"hobby"</span> <span class="hljs-attribute">value</span>=<span class="hljs-string">"music"</span>> 音乐 <input <span class="hljs-attribute">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-string">"hobby"</span> <span class="hljs-attribute">value</span>=<span class="hljs-string">"sports"</span>> 运动 </code></pre> <h2>CSS 表单样式</h2> <p>使用 CSS，我们可以对表单进行样式设置，使表单看起来更加美观和易用。例如，我们可以使用 CSS 来设置表单的背景颜色、字体、边框等等。</p> <h3>设置表单背景颜色</h3> <p>要设置表单的背景颜色，可以使用 CSS 的 background-color 属性。例如：</p> <pre><code class="hljs"><span class="hljs-selector-tag">form</span> { <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>; } </code></pre> <h3>设置表单字体</h3> <p>要设置表单的字体，可以使用 CSS 的 font-family 属性。例如：</p> <pre><code class="hljs"><span class="hljs-selector-tag">form</span> { <span class="hljs-attribute">font-family</span>: Arial, sans-serif; } </code></pre> <h3>设置表单边框</h3> <p>要设置表单的边框，可以使用 CSS 的 border 属性。例如：</p> <pre><code class="hljs"><span class="hljs-selector-tag">form</span> { <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#000000</span>; } </code></pre> <h2>表单验证</h2> <p>表单验证是确保用户在提交表单之前输入了正确的数据。HTML5 提供了一些内置的表单验证属性，例如 required、pattern 和 minlength。这些属性可以帮助我们确保用户输入了非空、符合特定格式和长度的数据。</p> <h3>使用 required 属性确保表单字段非空</h3> <p>要确保表单字段非空，可以使用 required 属性。例如：</p> <pre><code class="hljs"><<span class="hljs-keyword">input</span> <span class="hljs-keyword">type</span>="text" <span class="hljs-type">name</span>="username" required> </code></pre> <h3>使用 pattern 属性确保表单字段符合特定格式</h3> <p>要确保表单字段符合特定格式，可以使用 pattern 属性。例如：</p> <pre><code class="hljs"><input <span class="hljs-attribute">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attribute">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attribute">pattern</span>=<span class="hljs-string">"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}<pre><code class="language-html"><input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"> </code></pre>quot;</span>> </code></pre> <h3>使用 minlength 属性确保表单字段达到最小长度</h3> <p>要确保表单字段达到最小长度，可以使用 minlength 属性。例如：</p> <pre><code class="hljs"><input <span class="hljs-attribute">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attribute">name</span>=<span class="hljs-string">"password"</span> <span class="hljs-attribute">minlength</span>=<span class="hljs-string">"8"</span>> </code></pre> <h2>表单处理</h2> <p>当用户提交表单后，我们需要对表单数据进行处理。我们可以使用 PHP、Python、Java 等后端语言来处理表单数据。</p> <h3>使用 PHP 处理表单数据</h3> <p>要使用 PHP 处理表单数据，我们可以使用 $_POST 数组。例如：</p> <pre><code class="hljs"><span class="hljs-meta"><?php</span> <span class="hljs-variable">$username</span> = <span class="hljs-variable">$_POST</span>[<span class="hljs-string">'username'</span>]; <span class="hljs-variable">$email</span> = <span class="hljs-variable">$_POST</span>[<span class="hljs-string">'email'</span>]; <span class="hljs-variable">$password</span> = <span class="hljs-variable">$_POST</span>[<span class="hljs-string">'password'</span>]; <span class="hljs-comment">// 处理表单数据</span> <span class="hljs-meta">?></span> </code></pre> <h3>使用 Python 处理表单数据</h3> <p>要使用 Python 处理表单数据，我们可以使用 request.form 字典。例如：</p> <pre><code class="hljs">import requests username = request.form[<span class="hljs-string">'username'</span>] email = request.form[<span class="hljs-string">'email'</span>] password = request.form[<span class="hljs-string">'password'</span>] # 处理表单数据 </code></pre> <h3>使用 Java 处理表单数据</h3> <p>要使用 Java 处理表单数据，我们可以使用 HttpServletRequest 对象。例如：</p> <pre><code class="hljs"><span class="hljs-keyword">import</span> javax.<span class="hljs-property">servlet</span>.<span class="hljs-property">http</span>.<span class="hljs-property">HttpServletRequest</span>; <span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">FormHandler</span> { <span class="hljs-keyword">public</span> <span class="hljs-built_in">void</span> <span class="hljs-title function_">handleForm</span>(<span class="hljs-params">HttpServletRequest request</span>) { <span class="hljs-title class_">String</span> username = request.<span class="hljs-title function_">getParameter</span>(<span class="hljs-string">"username"</span>); <span class="hljs-title class_">String</span> email = request.<span class="hljs-title function_">getParameter</span>(<span class="hljs-string">"email"</span>); <span class="hljs-title class_">String</span> password = request.<span class="hljs-title function_">getParameter</span>(<span class="hljs-string">"password"</span>); <span class="hljs-comment">// 处理表单数据</span> } } </code></pre> </div></div><ins class="adsbygoogle adsbygoogle mb-[20px] md:mb-[15px]" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3142630786" data-ad-format="auto" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" full-width-responsive="true" data-v-101bfb4a></ins><div class="grid lg:flex lg:justify-between lg:items-center gap-y-5 lg:gap-y-0"><div class="flex justify-end items-center gap-x-1.5"><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg t="1704868210317" class="icon flex-shrink-0" viewBox="0 0 1024 1024" fill="#8a8a8a" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2510" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><path d="M512 280.901818c171.752727 0 328.145455 167.098182 387.956364 238.545455C839.68 591.127273 683.287273 757.992727 512 757.992727S183.389091 591.127273 123.578182 519.447273C183.389091 448 339.781818 280.901818 512 280.901818zM512 209.454545C298.356364 209.454545 117.76 412.858182 56.785455 490.123636a46.545455 46.545455 0 0 0 0 58.647273C117.76 626.036364 298.356364 829.44 512 829.44s393.309091-203.403636 454.283636-280.669091a46.545455 46.545455 0 0 0 0-58.647273C905.309091 412.858182 724.712727 209.454545 512 209.454545z m0 238.545455a71.68 71.68 0 1 1-69.818182 71.447273 69.818182 69.818182 0 0 1 69.818182-71.447273z m0-71.68A139.636364 139.636364 0 0 0 382.603636 465.454545a146.385455 146.385455 0 0 0 30.254546 155.927273 137.076364 137.076364 0 0 0 151.970909 30.254546A143.127273 143.127273 0 0 0 651.636364 519.447273a141.265455 141.265455 0 0 0-139.636364-143.127273z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 浏览 </span></button></div><div class="block h-3 border-e border-gray-300 mx-3 dark:border-gray-600"></div><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 喜欢 </span></button></div><div class="block h-3 border-e border-gray-300 mx-3 dark:border-gray-600"></div><div class="hs-tooltip inline-block min-w-[30px]"><button type="button" class="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"><svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"></path></svg> 0 <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-black" role="tooltip"> 回复 </span></button></div></div></div></div></div></div><div class="lg:col-span-1 lg:w-full lg:h-full lg:bg-gradient-to-r lg:from-gray-50 lg:via-transparent lg:to-transparent dark:from-slate-800"><div class="sticky top-14 start-0 py-9 lg:ps-4" itemprop="author" itemscope itemtype="https://schema.org/Person"><div class="group flex items-center gap-x-3 border-b border-gray-200 pb-8 mb-[15px] dark:border-gray-700"><a class="block flex-shrink-0" itemprop="url" href="https://www.bytezonex.com"><img onerror="this.setAttribute('data-error', 1)" alt="user avatar" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/avatar.png 1x, https://oss.bolzjb.com/avatar.png 2x" class="h-10 w-10 rounded-full" src="https://oss.bolzjb.com/avatar.png"></a><a class="group grow block" href="/"><h5 itemprop="name" class="group-hover:text-gray-600 text-sm font-semibold text-gray-800 dark:group-hover:text-gray-400 dark:text-gray-200"> Kyle </h5><p class="text-sm text-gray-500"> 探索Web开发资源和人工智能教程的代码社区 </p></a><div class="grow w-[120px]"><div class="flex justify-end"><a href="mailto:mybolide@163.com" class="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"><svg t="1726223114709" class="size-3.5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1508" width="16" height="16"><path d="M834.446 213.447h-640.341c-50.176 0-91.022 40.846-91.022 91.022v423.026c0 50.176 40.846 91.022 91.022 91.022h640.341c50.176 0 91.022-40.846 91.022-91.022v-423.026c0-50.176-40.846-91.022-91.022-91.022zM870.855 727.495c0 20.025-16.384 36.409-36.409 36.409h-640.341c-20.025 0-36.409-16.384-36.409-36.409v-423.026c0-20.025 16.384-36.409 36.409-36.409h640.341c20.025 0 36.409 16.384 36.409 36.409v423.026z" fill="#ffffff" p-id="1509"></path><path d="M786.773 358.059l-272.498 171.918-272.498-171.918c-12.743-8.078-29.582-4.21-37.661 8.533-8.078 12.743-4.21 29.582 8.533 37.661l286.72 180.907c4.551 2.845 9.557 4.21 14.563 4.21h0.91c5.006 0 10.013-1.365 14.563-4.21l286.72-180.907c12.743-8.078 16.611-24.917 8.533-37.661-8.306-12.857-25.145-16.611-37.888-8.533z" fill="#ffffff" p-id="1510"></path></svg> 联系我 </a></div></div></div><div class="flex justify-center items-center"><img onerror="this.setAttribute('data-error', 1)" alt="user avatar" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/wx_qrcode.jpg 1x, https://oss.bolzjb.com/wx_qrcode.jpg 2x" class="h-[200px] w-[200px]" src="https://oss.bolzjb.com/wx_qrcode.jpg"></div><div class="text-center group-hover:text-gray-600 text-sm font-semibold text-gray-800 dark:group-hover:text-gray-400 dark:text-gray-200"> 扫码关注微信公众号</div><div class="space-y-6"><ins class="adsbygoogle adsbygoogle mb-[20px] md:mb-[15px] md:max-h-[80px]" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3397578392" data-ad-format="fluid" data-ad-layout-key="-gx-2v-6g+z+150" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" data-v-101bfb4a></ins><!--[--><a class="group flex items-center gap-x-6" href="/archives/Zure5yYh.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">走进HTTP的世界：前端开发的基石</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="走进HTTP的世界：前端开发的基石" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/2024/02/20/b317b692c4036133da0e74e820c3c7ab.image 1x, https://oss.bolzjb.com/2024/02/20/b317b692c4036133da0e74e820c3c7ab.image 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/2024/02/20/b317b692c4036133da0e74e820c3c7ab.image"></div></a><a class="group flex items-center gap-x-6" href="/archives/M0RiGVKX.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">剖析「总线模式」：一种管理系统间数据流的简易方法</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="剖析「总线模式」：一种管理系统间数据流的简易方法" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/6.jpg 1x, https://oss.bolzjb.com/blog/thumb/6.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/6.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/Oxx8sSPi.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">Flutter 强随机密码生成器应用，轻松打造手机上专属的安全密码</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="Flutter 强随机密码生成器应用，轻松打造手机上专属的安全密码" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/2024/02/21/9df8d33824bac3fb5cc476c16699a3d8.image 1x, https://oss.bolzjb.com/2024/02/21/9df8d33824bac3fb5cc476c16699a3d8.image 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/2024/02/21/9df8d33824bac3fb5cc476c16699a3d8.image"></div></a><a class="group flex items-center gap-x-6" href="/archives/28ainjH8.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">Flutter 分享动态地址尾巴</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="Flutter 分享动态地址尾巴" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/6.jpg 1x, https://oss.bolzjb.com/blog/thumb/6.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/6.jpg"></div></a><a class="group flex items-center gap-x-6" href="/archives/7JUU1R2B.html"><div class="grow"><h3 class="text-sm text-[#303133] group-hover:text-blue-600 dark:text-gray-200 dark:group-hover:text-blue-500 break-all">Vue 3 携首个组件库强势来袭，全方位解锁前端开发新姿势！</h3></div><div class="flex-shrink-0 relative rounded-lg overflow-hidden w-20 h-20"><img onerror="this.setAttribute('data-error', 1)" alt="Vue 3 携首个组件库强势来袭，全方位解锁前端开发新姿势！" loading="lazy" data-nuxt-img srcset="https://oss.bolzjb.com/blog/thumb/29.jpg 1x, https://oss.bolzjb.com/blog/thumb/29.jpg 2x" class="w-20 h-20 absolute top-0 start-0 object-cover rounded-lg" src="https://oss.bolzjb.com/blog/thumb/29.jpg"></div></a><!--]--><ins class="adsbygoogle adsbygoogle mb:mt-[24px] max-w-[358px] mb-[20px] md:mb-[15px] overflow-hidden" style="display:block;" data-ad-client="ca-pub-9777110919590837" data-ad-slot="3095100140" data-ad-format="auto" data-analytics-uacct data-analytics-domain-name data-adsbygoogle-status data-ad-full-width-responsive="false" full-width-responsive="true" data-v-101bfb4a></ins></div></div></div></div></div><!--]--></div></main><footer class="w-full max-w-[85rem] pb-10 px-4 sm:px-6 lg:px-8 mx-auto"><div class="text-center"><div><a class="flex-none text-xl font-semibold text-black dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="/" aria-label="Brand">ByteZoneX</a></div><div class="mt-3 text-sm"><p class="text-gray-500"> © ByteZoneX. 2023 Kyle. All rights reserved. </p><p class="text-gray-500"> 备案号： <a class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400" href="https://beian.miit.gov.cn" target="_blank">京ICP备14007360号-4</a></p></div></div></footer></div><!--]--></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":76,"once":78,"_errors":79,"serverRendered":82,"path":83},["ShallowReactive",3],{"blogCategories":4,"$ttMp0qbt10":44},[5,8,11,14,17,20,23,26,29,32,35,38,41],{"id":6,"title":7},"2954937509122932736","日志",{"id":9,"title":10},"2954937466366197760","开发配置",{"id":12,"title":13},"2954937441280065536","前端",{"id":15,"title":16},"2959350982124765184","后端",{"id":18,"title":19},"2959351812286578688","Android",{"id":21,"title":22},"2959351884051120128","IOS",{"id":24,"title":25},"2954937393997676544","操作系统",{"id":27,"title":28},"2954937335512301568","开发工具",{"id":30,"title":31},"2962269454831976448","esp32",{"id":33,"title":34},"2969586738701271040","数据库",{"id":36,"title":37},"2966899206691749888","电脑技巧",{"id":39,"title":40},"3071998081319829504","AI安装配置",{"id":42,"title":43},"2970920559132540928","Office技巧",{"tuijianArticle":45,"struturedDataText":63,"articleData":64},[46,50,53,57,60],{"title":47,"urlName":48,"coverImg":49},"走进HTTP的世界：前端开发的基石","Zure5yYh","https://oss.bolzjb.com/2024/02/20/b317b692c4036133da0e74e820c3c7ab.image",{"title":51,"urlName":52},"剖析「总线模式」：一种管理系统间数据流的简易方法","M0RiGVKX",{"title":54,"urlName":55,"coverImg":56},"Flutter 强随机密码生成器应用，轻松打造手机上专属的安全密码","Oxx8sSPi","https://oss.bolzjb.com/2024/02/21/9df8d33824bac3fb5cc476c16699a3d8.image",{"title":58,"urlName":59},"Flutter 分享动态地址尾巴","28ainjH8",{"title":61,"urlName":62},"Vue 3 携首个组件库强势来袭，全方位解锁前端开发新姿势！","7JUU1R2B","{\n \"@context\": \"https://schema.org\",\n \"@type\": \"NewsArticle\",\n \"image\": [\"https://oss.bolzjb.com/2024/02/20/1fbb5ca0aad9cc629c9a13151667fcd7..png\"],\n \"headline\": \"用HTML和CSS创建美观而有用的表单\",\n \"datePublished\": \"2023-10-03T19:10:56+8:00\",\n \"dateModified\": \"2024-02-27T06:11:19+8:00\",\n \"author\": [{\n \"@type\": \"Person\",\n \"name\": \"Kyle\",\n \"url\": \"https://www.bytezonex.com\"\n }]\n }",{"urlName":65,"title":66,"categoryId":12,"categoryTitle":13,"keywords":67,"description":68,"coverImg":69,"content":70,"createdAt":71,"viewCount":72,"updatedAt":73,"datePublished":74,"dateModified":75},"QAxhkcII","用HTML和CSS创建美观而有用的表单","HTML5 表单,CSS 表单样式,HTML5 表单控件,表单验证,表单设计,表单布局,响应式表单,表单元素,表单交互","这篇教程将向你展示如何使用 HTML5 和 CSS 创建美观而有用的表单。我们将介绍如何使用不同的表单控件，如何对表单进行样式设置，以及如何处理表单数据。完成本教程后，你将能够创建出美观实用的表单，以收集和处理用户数据。","https://oss.bolzjb.com/2024/02/20/1fbb5ca0aad9cc629c9a13151667fcd7..png","\u003Cp>如今，无论你是在线购物、提交查询还是创建新帐户，你都不可避免地会遇到各种各样的表单。表单是用户与网站交互的必经之路，而精美的表单设计更是让人赏心悦目，使用起来得心应手。\u003C/p>\n\u003Ch2>HTML 表单基础\u003C/h2>\n\u003Cp>HTML5 为我们提供了多种表单控件，包括文本框、密码框、单选按钮、复选框、下拉菜单等等。这些控件允许用户输入各种类型的数据，从简单的文本到复杂的日期和时间。\u003C/p>\n\u003Ch3>使用 \u003Cinput> 元素创建文本框\u003C/h3>\n\u003Cp>文本框是表单中最常见的元素，用于输入单行文本。要创建文本框，可以使用 \u003Cinput> 元素，并指定 type="text"。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"username"\u003C/span> \u003Cspan class=\"hljs-attribute\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"用户名"\u003C/span>>\n\u003C/code>\u003C/pre>\n\u003Ch3>使用 \u003Ctextarea> 元素创建文本域\u003C/h3>\n\u003Cp>文本域用于输入多行文本。要创建文本域，可以使用 \u003Ctextarea> 元素。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><textarea \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"address"\u003C/span> \u003Cspan class=\"hljs-attribute\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"地址"\u003C/span>></textarea>\n\u003C/code>\u003C/pre>\n\u003Ch3>使用 \u003Cselect> 元素创建下拉菜单\u003C/h3>\n\u003Cp>下拉菜单用于提供一组选项，让用户从中选择。要创建下拉菜单，可以使用 \u003Cselect> 元素。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><\u003Cspan class=\"hljs-keyword\">select\u003C/span> \u003Cspan class=\"hljs-type\">name\u003C/span>="country">\n <\u003Cspan class=\"hljs-keyword\">option\u003C/span> \u003Cspan class=\"hljs-keyword\">value\u003C/span>="china">中国</\u003Cspan class=\"hljs-keyword\">option\u003C/span>>\n <\u003Cspan class=\"hljs-keyword\">option\u003C/span> \u003Cspan class=\"hljs-keyword\">value\u003C/span>="usa">美国</\u003Cspan class=\"hljs-keyword\">option\u003C/span>>\n <\u003Cspan class=\"hljs-keyword\">option\u003C/span> \u003Cspan class=\"hljs-keyword\">value\u003C/span>="japan">日本</\u003Cspan class=\"hljs-keyword\">option\u003C/span>>\n</\u003Cspan class=\"hljs-keyword\">select\u003C/span>>\n\u003C/code>\u003C/pre>\n\u003Ch3>使用 \u003Cinput> 元素创建单选按钮和复选框\u003C/h3>\n\u003Cp>单选按钮用于让用户从一组选项中选择一个。要创建单选按钮，可以使用 \u003Cinput> 元素，并指定 type="radio"。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"radio"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"gender"\u003C/span> \u003Cspan class=\"hljs-attribute\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"male"\u003C/span>> 男\n<input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"radio"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"gender"\u003C/span> \u003Cspan class=\"hljs-attribute\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"female"\u003C/span>> 女\n\u003C/code>\u003C/pre>\n\u003Cp>复选框用于让用户从一组选项中选择多个。要创建复选框，可以使用 \u003Cinput> 元素，并指定 type="checkbox"。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"hobby"\u003C/span> \u003Cspan class=\"hljs-attribute\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"reading"\u003C/span>> 读书\n<input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"hobby"\u003C/span> \u003Cspan class=\"hljs-attribute\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"music"\u003C/span>> 音乐\n<input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"hobby"\u003C/span> \u003Cspan class=\"hljs-attribute\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"sports"\u003C/span>> 运动\n\u003C/code>\u003C/pre>\n\u003Ch2>CSS 表单样式\u003C/h2>\n\u003Cp>使用 CSS，我们可以对表单进行样式设置，使表单看起来更加美观和易用。例如，我们可以使用 CSS 来设置表单的背景颜色、字体、边框等等。\u003C/p>\n\u003Ch3>设置表单背景颜色\u003C/h3>\n\u003Cp>要设置表单的背景颜色，可以使用 CSS 的 background-color 属性。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">form\u003C/span> {\n \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n}\n\u003C/code>\u003C/pre>\n\u003Ch3>设置表单字体\u003C/h3>\n\u003Cp>要设置表单的字体，可以使用 CSS 的 font-family 属性。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">form\u003C/span> {\n \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: Arial, sans-serif;\n}\n\u003C/code>\u003C/pre>\n\u003Ch3>设置表单边框\u003C/h3>\n\u003Cp>要设置表单的边框，可以使用 CSS 的 border 属性。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">form\u003C/span> {\n \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000000\u003C/span>;\n}\n\u003C/code>\u003C/pre>\n\u003Ch2>表单验证\u003C/h2>\n\u003Cp>表单验证是确保用户在提交表单之前输入了正确的数据。HTML5 提供了一些内置的表单验证属性，例如 required、pattern 和 minlength。这些属性可以帮助我们确保用户输入了非空、符合特定格式和长度的数据。\u003C/p>\n\u003Ch3>使用 required 属性确保表单字段非空\u003C/h3>\n\u003Cp>要确保表单字段非空，可以使用 required 属性。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><\u003Cspan class=\"hljs-keyword\">input\u003C/span> \u003Cspan class=\"hljs-keyword\">type\u003C/span>="text" \u003Cspan class=\"hljs-type\">name\u003C/span>="username" required>\n\u003C/code>\u003C/pre>\n\u003Ch3>使用 pattern 属性确保表单字段符合特定格式\u003C/h3>\n\u003Cp>要确保表单字段符合特定格式，可以使用 pattern 属性。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \u003Cspan class=\"hljs-attribute\">pattern\u003C/span>=\u003Cspan class=\"hljs-string\">"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}\u003Cpre>\u003Ccode class=\"language-html\"><input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$">\n\u003C/code>\u003C/pre>quot;\u003C/span>>\n\u003C/code>\u003C/pre>\n\u003Ch3>使用 minlength 属性确保表单字段达到最小长度\u003C/h3>\n\u003Cp>要确保表单字段达到最小长度，可以使用 minlength 属性。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\"><input \u003Cspan class=\"hljs-attribute\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"password"\u003C/span> \u003Cspan class=\"hljs-attribute\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"password"\u003C/span> \u003Cspan class=\"hljs-attribute\">minlength\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span>>\n\u003C/code>\u003C/pre>\n\u003Ch2>表单处理\u003C/h2>\n\u003Cp>当用户提交表单后，我们需要对表单数据进行处理。我们可以使用 PHP、Python、Java 等后端语言来处理表单数据。\u003C/p>\n\u003Ch3>使用 PHP 处理表单数据\u003C/h3>\n\u003Cp>要使用 PHP 处理表单数据，我们可以使用 $_POST 数组。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-meta\"><?php\u003C/span>\n\u003Cspan class=\"hljs-variable\">$username\u003C/span> = \u003Cspan class=\"hljs-variable\">$_POST\u003C/span>[\u003Cspan class=\"hljs-string\">'username'\u003C/span>];\n\u003Cspan class=\"hljs-variable\">$email\u003C/span> = \u003Cspan class=\"hljs-variable\">$_POST\u003C/span>[\u003Cspan class=\"hljs-string\">'email'\u003C/span>];\n\u003Cspan class=\"hljs-variable\">$password\u003C/span> = \u003Cspan class=\"hljs-variable\">$_POST\u003C/span>[\u003Cspan class=\"hljs-string\">'password'\u003C/span>];\n\n\u003Cspan class=\"hljs-comment\">// 处理表单数据\u003C/span>\n\u003Cspan class=\"hljs-meta\">?>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Ch3>使用 Python 处理表单数据\u003C/h3>\n\u003Cp>要使用 Python 处理表单数据，我们可以使用 request.form 字典。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">import requests\n\nusername = request.form[\u003Cspan class=\"hljs-string\">'username'\u003C/span>]\nemail = request.form[\u003Cspan class=\"hljs-string\">'email'\u003C/span>]\npassword = request.form[\u003Cspan class=\"hljs-string\">'password'\u003C/span>]\n\n# 处理表单数据\n\u003C/code>\u003C/pre>\n\u003Ch3>使用 Java 处理表单数据\u003C/h3>\n\u003Cp>要使用 Java 处理表单数据，我们可以使用 HttpServletRequest 对象。例如：\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-keyword\">import\u003C/span> javax.\u003Cspan class=\"hljs-property\">servlet\u003C/span>.\u003Cspan class=\"hljs-property\">http\u003C/span>.\u003Cspan class=\"hljs-property\">HttpServletRequest\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">public\u003C/span> \u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">FormHandler\u003C/span> {\n\n \u003Cspan class=\"hljs-keyword\">public\u003C/span> \u003Cspan class=\"hljs-built_in\">void\u003C/span> \u003Cspan class=\"hljs-title function_\">handleForm\u003C/span>(\u003Cspan class=\"hljs-params\">HttpServletRequest request\u003C/span>) {\n \u003Cspan class=\"hljs-title class_\">String\u003C/span> username = request.\u003Cspan class=\"hljs-title function_\">getParameter\u003C/span>(\u003Cspan class=\"hljs-string\">"username"\u003C/span>);\n \u003Cspan class=\"hljs-title class_\">String\u003C/span> email = request.\u003Cspan class=\"hljs-title function_\">getParameter\u003C/span>(\u003Cspan class=\"hljs-string\">"email"\u003C/span>);\n \u003Cspan class=\"hljs-title class_\">String\u003C/span> password = request.\u003Cspan class=\"hljs-title function_\">getParameter\u003C/span>(\u003Cspan class=\"hljs-string\">"password"\u003C/span>);\n\n \u003Cspan class=\"hljs-comment\">// 处理表单数据\u003C/span>\n }\n}\n\u003C/code>\u003C/pre>\n","2023-10-03 19:10:56",473,"2024-02-27 06:11:19","2023-10-03T19:10:56+8:00","2024-02-27T06:11:19+8:00",["Reactive",77],{},["Set"],["ShallowReactive",80],{"blogCategories":81,"$ttMp0qbt10":81},null,true,"/archives/QAxhkcII.html"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{googleAdsense:{id:"ca-pub-9777110919590837",analyticsDomainName:"",analyticsUacct:"",hideUnfilled:false,includeQuery:false,onPageLoad:false,overlayBottom:false,pageLevelAds:false,pauseOnLoad:false,tag:"adsbygoogle",test:false}},app:{baseURL:"/",buildId:"b9e826b1-a867-4ee1-9490-c7deb67e327e",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="c49498788a0d52b5f484fda7-|49" defer></script>