2019-05-14H5

一、form标签

1、表单标签(form)
专门用来进行用户信息收集的一个标签,一般结合表单相关的标签 来使用才用意义
表单相关标签:input、select、textarea等
主要提供form中子标签的内容的提交和重置功能

action属性:提交的路径(提供接口)
method属性:提供的方式(post/get)

2、input标签
inpu标签是表单相关标签,可以在form标签中使用,也可以单独使用

    1)type
    input标签会因为type的不同,功能完全不一样
    
    2)name  --  区分;提交(相当于字典的key)
    要不要给这个属性赋值,注意看:A、需不需要区分不同的内容
                                B、需不需要提交这个input的值
    
    3)value
    value的意义会根据type值的不同而不一样;但是表单提交的时候,提交的都是value的值

(1)text文本输入框
name -- 区分;提交(相当于字典的key)
value -- 给这个属性赋值是在设置输入框的默认值;
修改输入框的内容,会改变这个属性的值。
placeholder -- 输入框为空的时候的默认显示值
maxlength -- 输入框最多能输入的内容的长度
(2) password
密码输入框
value -- 给这个属性赋值是在设置输入框的默认值;
修改输入框的内容,会改变这个属性的值。
placeholder -- 输入框为空的时候的默认显示值
maxlength -- 输入框最多能输入的内容的长度
3)单选按钮 -- radio
name属性 -- 如果多个选项是一组数据必须保证他们的属性值一样,才能做到多个选项单选。
value属性 -- 不能显示,只是用来提交的
checked属性 -- 给这个属性赋值为checked,让按钮处于默认选中状态

补充:可以通过将label的for属性和按钮的id属性保持一致,
让label和input关联
4)复选按钮 -- checkbox
name属性 -- 如果多个选项是一组数据必须保证他们的属性值一样,才能做到多个选项单选。
value属性 -- 不能显示,只是用来提交的
checked属性 -- 给这个属性赋值为checked,让按钮处于默认选中状态
5)普通按钮 -- button
value属性 -- 按钮上显示的内容

    补充:button标签

6)重置按钮 -- reset
重置当前重置按钮所在的form标签中所有的相关按钮的值
7)提交按钮 --submit
以“name=value”的方式,提交当前form中的内容



    
        
        
    
    
        





二、下拉菜单

1、下拉菜单
select标签 -- 整个下拉列表
option标签 -- 列表中的选项
optgroup标签 -- 一个列表选项分组,通过label属性值类设置分组名
只是在显示上对选项进行分区,不影响提交结果
2、多行文本域
多行文本域 -- textarea
提供一个可以换行的输入框
name属性 -- 和以前的一样
rows属性 -- 行数、控制输入框的默认高度
cols属性 -- 列数、控制输入框的默认宽度
maxlength属性 -- 控制输入内容的最大长度
placeholder属性 -- 默认值
autofocus属性 -- 值设置为autofocus,页面刷新的时候自动成为焦点(自动成为编辑区)



    
        
        
    
    
 


三、无语义标签

div标签和span标签,都是无语义标签,
使用div一般用于对网页中的内容分块和分组



    
        
        
    
    
       
        
        
        
            百度一哈
        
         
            百度一哈
        
        
        
    

你可能感兴趣的:(2019-05-14H5)