[ASP.NET]Web的GroupBox:FieldSet And Legend

[ASP.NET]Web的GroupBox:FieldSet And Legend

講起來真糗,我到今天才知道FieldSet And Legend這玩意兒,一般我們在寫Winform的時候,為了排版上好看或想要將具有相同關聯的元件放在一起,我們通常會使用GroupBox把它包起來,像這樣:

image

之前想說在Web上也來弄一個相同的東西,後來發現ASP.NET本身的控制項沒有提供這樣的元件,後來自己用Panel+Label的方式組了一個GroupBox like的元件出來,大概就長的跟下面這個很像:

image 

既然達到相同的目的了,功能也相同,所以一直以來也沒有理會是不是有更簡單的做法,今天member做讀書會分享時講到FieldSet這東西,覺得蠻有趣的,下面我們看一下FieldSet是什麼樣的東西,看一下它的呈現效果,跟Winform的效果幾乎一模一樣,

image

而且寫法一點也不困難,如下方,fieldset是外框,legend是顯示的label,透過這個DOM物件我們可以達到GroupBox相同的效果,蠻不錯的。


      <fieldset style="width: 277px; height: 165px">
      <legend>登入區
          <asp:Login ID="Login1" runat="server" Style="z-index: 102; left: 16px; position: relative;
              top: 230px">
          </asp:Login>
         </legend>
      </fieldset>

游舒帆 (gipi)

探索原力Co-founder,曾任TutorABC協理與鼎新電腦總監,並曾獲選兩屆微軟最有價值專家 ( MVP ),離開職場後創辦探索原力,致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關,都是在為未來儲備能量,2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》,為培養台灣未來的領袖而努力。