表单

1、表单

表单1

表单2

上图都是表单，官方点说

表单就是用户可以在其中提供一定的数据或信息或选项的一些html元素。表单通常有一个“提交”按钮，然后可以将这些数据据/信息/选项提供给服务器上的程序使用——数据处理。

表单的核心是数据

表单标签的构成和形式：

"
第一个表单项
第二个表单项
……

基础表单

表单种类及属性
①单行文本框

属性	作用
value	设置其中初始文字
size	设置输入框的宽度
maxlength	设置输入框最多输入字符个数
readonly	只读（无值）
disable	设置输入框无效，即数据无效

②密码框

属性	作用
value	设置其中初始文字
size	设置输入框的宽度
maxlength	设置输入框最多输入字符个数

③单选项

说明：单选项通常必有value值

属性	作用
checked	表示该选项默认是选中的状态。（无值属性）
name	一组的单选项name值必须相同

除了上面的属性以外还有：

属性	作用
checked	表示该选项默认是选中的状态。（无值属性）
name	一组的单选项name值必须相同

④多选项

说明：单选项通常必有value值

属性和单选项相同

⑤提交按钮

⑥图片按钮

⑦重置按钮

会将表单的所有用户填写或选择数据恢复到初始状态

⑧普通按钮

对表单没有影响，但可以从中产生“动作”以实现其他要求

⑨文件域

可以让客户选择本地文件，发送到服务器

⑩隐藏域

说明：界面上不可见，但是作为一份“隐藏的数据”提交给服务器——编程所需。

其他类型表单
a)下拉选择：用select和option标签配合实现

    文字1
            文字2
            文字3
                ……


说明：option标签上可以使用selected属性，表明该select元素的默认选中的项（默认是第一项被选中）。
select标签上可以使用multiple属性，使该select元素可以“选择多项”（即默认只能选一个）

文字不过瘾，图片来说明：

下拉选择

b)多行选择（列表选项）：

            文字1
            文字2
            文字3
                ……

来！上图！

多行选择

c)多行文本框

内容

说明：rows设定的行数是数字，表示该多行文本框可以显示的文字行数。
cols设定的列数是数字，表示该多行文本框可以显示的一行文字中个数。
此标签没有value属性。但其实际的“值”是放在此标签中间的所有内容。

多行文本框

表单项都必须有name属性，以表明其“名字”——服务器取其中的数据就是凭此名字。

表单的全面应用：（放大招了嗷！）

    
用户注册
    

    

        

            
真实姓名：
            

        
        

            
密码：
            

        
        

            
性别：
            

                男
                女
                打死也不说
            
        
        

            
爱好：
            

                篮球
                排球
                足球
                中国足球
            
        
        

            
身份：
            

                
                    已工作
                    大学
                    中学
                    什么叫身份
                

            
        
        

            
居住地：
            

                
                    北京
                    上海
                    山东
                    河北
                
                

                
                    请选择城市
                    北京
                    上海
                    济南
                    青岛
                    石家庄
                    邯郸
                
            
        
        

            
你的简历：
            

                
            
        
        

            
你的照片：
            

        
        

            

            

                
                
                
            
        
        

            

            

                同意注册协议
            
        
    
    

实现效果：

实现效果

如果你看到这里！你都懂了！那么~你的表单和表格棒棒哒！