制作HTML表单（文本框设置对齐等）

 目录

表单的作用

制作基本表单需学会

制作一个简易的Htm表单 （1.0版）

制作一个简易的Htm表单 （2.0版）

• 表单的作用：用来收集用户信息。
•  在html当中，一个完整的表单通常由，表单域、表单控件（也称为表单元素）、和提示信息3部分 组成。

 制作基本表单需学会

• 文本框
• 文本域
• 下拉列表
• 单选、复选
• 按钮

详细内容看下面这个博主： 

(16条消息) HTML表格表单制作_我丢丢雷的博客-CSDN博客_html表单制作

制作一个简易的Htm表单 （1.0版）

    
    



    
        

            

            
个人基本信息：
            用户名：

            密  码： 

            年  龄：

            出生日期： 

            性别：男 女


            

            

            
个人爱好情况：
            个人介绍:

             

            喜欢的歌曲有：

            曼珠沙华
            我曾
            我的女人
            无人知晓的我
            十年
            广寒宫

            喜欢的歌曲类型：
            
                摇滚
                轻音乐
                rap
            
            
            

            
            
        

        

     运行结果图： 我们可以看到通过

可以将我们想要的信息归纳在一个大的类别里，在外观上更加好看，明了。

​

       由于我们这边没有涉及到数据的存储，即（ 

）是不存在的，所以当我们点击完注册登入后，就会出现如下图的报错情况。但是我们可以在网页链接那里看到我们注册界面的一系列信息。

 

---

制作一个简易的Htm表单 （2.0版）

文本框对齐：

用到的代码如下：

 label{
        cursor: pointer;
        display: inline-block;
        padding: 3px 6px;
        text-align: right;
        width: 150px;
        vertical-align: top;
            } 

 上面我们做了个简易的中文版，可以发现我们的文字和文本框都没有对齐，所以接下来的进一步调整，就要做好这些问题。接下来那些表有稍作调整，我写了英文版了，代码如下。

完整代码：（同样用了内联式，无需新建文档）

    
    

    



    
        Zoo Keeper Application Form
        Please complete the form Mandatory fields are marked with a
        

        

            
CONTACT DETAILS
            Name*
            


            Telephone* 
            


              Email*
             

        

        

            
PERSONAL INFORMATION
             age
            


              Gender 
            
                one
                two
                three
                four
            
  

            When did you fist know you wanted to be a zoo_keeper  
            
        




        

            
PICK YOUR FAVORITE ANIMALS
            Zebra
            Cat
            Anaconda
            Human

            Elephant
            Wildebeest
            Pigeon
            Crab

        

            
        

        

运行后结果如下，对齐文本框后就显得更加规范些了。 

都看到这里了，如果觉得有用的话，点个赞收藏一下哦，不然后面找不到咯。