HTML表单、按钮、下拉菜单基础

1.表单标签

• 表单标签（form）
  表单标签的作用：用来收集与用户信息 - 实质是将表单标签作为容器，收集表单标签中其他标签的信息
  本身没有任何显示效果

action属性：设置提交地址
method属性：提交方式（post/get）
点提交按钮提交的时候，将表单所有相关标签以name=value的形式，
按照method属性提供的提交方式，提交给action属性对应的接口

• form标签提供了两大功能，a.统一提交. b.重置

2.input标签(单标签)

既可以放在form标签中，也可以不放在form标签中，单独使用
type属性 - type对应的值不一样，input标签体现的功能不一样

            
            
            
            
        账号： 

        验证码：

    
        
        密码： 


        
        
        男
        女

        
        未婚
        已婚

        
        
        打球
        睡觉
        打豆豆
        吃饭

        
        
        
        
        
        
        
        
        
        

        
        
        
        
        
        
        

3.按钮标签

• 按钮标签（button）
  双标签，中间内容部分更灵活

登陆

显示

image.png

4.下拉菜单

下拉菜单（select - option）
select属性 - 代表整个下拉菜单
name属性 - 区分和提交

option标签 - 下拉菜单中的选项
内容 - 显示部分
value属性 - 提交的内容
selected=“selected” - 设置默认值

opgroup标签 -分组

考试科目
                
            语文
            数学
            英语
            物理
            
            
            历史
            政治
            地理
            
            
            

            
            
            四川省
            广东省
            广西省
            湖南省
            湖北省
            江西省
            

            
            成都市
            广州市
            南宁市
            长沙市
            武汉市
            南昌市
            
            
        

显示

image.png

5.多行文本输入框

• 多行文本输入框（textarea）
  可以输入多行内容，并且内容超出范围可以滚动

name属性 - 提交和区分
rows属性 - 一次可以显示的行数（决定高度）
cols属性 - 列数（决定宽度）
placeholder - 提示语句
内容相当于value

内容

显示

image.png

6.div和span

• div和span标签是无语义标签
  一般用来将网页中的标签进行分组和分模块使用

    
        
        
    
    
        
        
        
        

            
div
div
        
        

span span

显示

image.png