您的位置：首页 > Web前端 > CSS

简单的表单布局

2016-07-15 15:25 537 查看
此篇博文的重点不是布局，只是单纯的记录下自己一直忽视的知识点。效果图与下图类似，只是没有滚动条。刚开始，本人想到用form表单做，程序如下：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="ex1.css"/></head><body ><form action=""  style="background-color: #eeeeee;width:400px;margin:0 auto;border: 1px solid #aaaaaa;position:relative;">    <label for="" style="position:absolute;top:-10px;left:0;"><b>Your Contact Details</b></label><br/>    <label for="name">Name:(Required)</label><br/>    <input type="text" id="name"/><br/><br/>    <label for="email">Email Address:</label><br/>    <input type="text" id="email"/><br/><br/>    <label for="web">Web Address:</label><br/>    <input type="text" id="web"/></form></body></html>会发现程序中并未用到fieldset标签，在此贴上用到fieldset标签，对比后会发现程序更简单，符合逻辑：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="ex1.css"/></head><body ><fieldset action=""  style="width:500px;margin:0 auto;background-color: #F5F5F5">    <legend>Your Contact Details</legend>    <label for="name">Name:(Required)</label><br/>    <input type="text" id="name"/><br/><br/>    <label for="email">Email Address:</label><br/>    <input type="text" id="email"/><br/><br/>    <label for="web">Web Address:</label><br/>    <input type="text" id="web"/></fieldset></body></html>fieldset标签，表示表单分组。为了识别每个fieldset的用途，会用到legend元素。legend元素用来添加分组说明标签。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                css
                                                表单
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航