2019-01-22 web day2 表单标签

作者: woming | 来源:发表于2019-01-22 17:35 被阅读0次

1.表单列表
表单标签一般用来做用户信息收集，单独用没有意义，一般是结合相关标签来使用(input，select，textarea)
表单标签可以对包含在这个标签中的其他标签做信息的提交和重置

action：提交位置（接口相关）
method：请求方式（get/post）

2.select和textarea
select标签 - 代表整个下拉列表
option标签 - 代表列表中的每个选项
可以通过设置selected属性的值为'selected'，来让这个选项默认选择
optgroup标签 - 设置label的值来对当前下拉菜单的内容进行分组

textarea标签 - 输入框，可以同时显示多行内容(可以自动换行和上下滚动)
name属性 - 区分和提交
cols - 列数(一行显示的文字的数量，影响输入框的宽度)
rows - 行数(不滚动最多能显示的行数，影响输入框的高度)
placeholder - 占位符
maxlength - 限制输入的字符的个数

3.div和span

1.div和span都是无语义标签：网页中内容分组分块，都可以使用div作为容器
2.html中标签分类：行内标签、块级标签
块级标签：一个占一行，例如：div、h1、p、列表、table、tr、form、option...
行内标签：一行显示多个，例如：span、font、td、input、select、textarea...

01表单标签（form）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--1.表单标签（form）
            表单标签一般用来做用户信息收集，单独用没有意义，一般是结合相关标签来使用(input，select，textarea)
            表单标签可以对包含在这个标签中的其他标签做信息的提交和重置
            
            action：提交位置（接口相关）
            method：请求方式（get/post）
        -->

        <!--2.input标签
            单标签
            1)type属性：
                    决定输入框的样式
                    text(默认) - 普通的文本输入框
            2)name属性：
                    这个属性主要用来区分数据的。***提交的时候是以name=value形式提交***
            3)value属性：
                    单标签中的value相当于双标签的内容；但是value值只能是文本
                    设置value属性其实就是设置输入框中默认显示的内容；修改内容其实是在修改value值
        
        
        -->
        <form action="" method="get">
            <!--1.text：文本输入框
                placehorder - 占位符（提示信息）
                maxlength - 最多输入字符个数
                
            -->
            
            <input type="text" name="tel" value="110" placeholder="请输入电话号码" maxlength="6"/>
            <input type="text" name="email" value="" />
            
            <!--2.password:密码输入框
                placehorder - 占位符(提示信息)
                maxlength - 最多输入字符个数
            -->
            <input type="password" name="密码" value="" placeholder="请输入密码(3-8)" maxlength="8"/>
            
            <br />
            <!--3.radio：单选按钮
                name - 同一组数据对应的name值设置成一样的才能做到单选
                value - 这儿的value只是用于数据提交，不能显示
                checked - 设置为checked让按钮处于默认选择状态
            -->
            <input type="radio" name="sex" id="s1" value="男生" checked="checked"/><label for="s1">男</label>
            <input type="radio" name="sex" id="s2" value="女生" /><label for="s2">女</label>
            <br />
            <!--让文字和按钮关联
                文字用label标签显示，设置for属性的值为想要关联的按钮的id的值
                这样做，点击文字和点击按钮的效果一样
            -->
            
            <input type="radio" name="marry" id="m1" value="已婚" /><label for="m1">已婚</label>
            <!--<input type="radio" name="marry" value="已婚" /><font>已婚</font>-->
            <input type="radio" name="marry" id="m2" value="未婚" /><label for="m2">未婚</label>
            <input type="radio" name="marry" id="m3" value="保密" checked="checked"/><label for="m3">保密</label>
            <br />
            
            <!--4.checkbox：复选按钮
                name - 同一组数据的name值要一样
                value - 这儿的value只是用于数据提交，不能显示
                
            -->
            <input type="checkbox" name="interest1" id="i1" value="教育" checked="checked"/><label for="i1">教育</label>
            <input type="checkbox" name="interest2" id="i2" value="互联网" /><label for="i2">互联网</label>
            <input type="checkbox" name="interest3" id="i3" value="银行" /><label for="i3">银行</label>
            <br />
            
            <!--5.button：普通按钮
                value - 对应的值会显示在按钮上
                
            -->
            <input type="button" name="" value="登录" />
            
            <br />
            <!--6.submit：提交按钮
                这个按钮的点击事件是将当前所在的form标签中，
                设置了name属性的相关标签的数据以'name=value'的形式提交
            -->
            <input type="submit" value="提交" />
            
            <!--7.reset：重置按钮
                这个按钮的点击事件是将当前所在的form标签中，所有标签设置成初始状态
            -->
            <input type="reset" value="重置" />
            
            <!--8.其他类型-->
            <input type="color" name="" id="" value="" />
            <input type="file" name="" id="" value="" />
            <input type="date" name="" id="" value="" />
            <input type="datetime" name="" id="" value="" />
        </form>
        
        <!--2.button标签-->
        <button><img src="img/1.jpg"/></button>
        
    </body>
</html>

02 select下拉菜单和textarea多行文本域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--1.下拉菜单(列表)
            select标签 - 代表整个下拉列表
            option标签 - 代表列表中的每个选项
                         可以通过设置selected属性的值为'selected'，来让这个选项默认选择
            
            optgroup标签 - 设置label的值来对当前下拉菜单的内容进行分组
            
        -->
        <select name="province">
            <optgroup label="省"></optgroup>
            <option value="四川省">四川省</option>
            <option value="云南省">云南省</option>
            <option value="吉林省">吉林省</option>
            <option value="黑龙江">黑龙江省</option>
            <optgroup label="直辖市"></optgroup>
            <option selected="selected" value="北京">北京</option>
            <option value="重庆">重庆</option>
            <option value="天津">天津</option>
            <option value="上海">上海</option>
        </select>
        <select name="city">
            <option value="成都市">成都市</option>
            <option value="绵阳市">绵阳市</option>
            <option value="巴中市">巴中市</option>
            <option value="宜宾市">宜宾市</option>
            <option value="雅安市">雅安市</option>
            <option selected="selected" value="北京">北京</option>
        </select>
        
        <!--2.多行文本域
            textarea标签 - 输入框，可以同时显示多行内容(可以自动换行和上下滚动)
            name属性 - 区分和提交
            cols - 列数(一行显示的文字的数量，影响输入框的宽度)
            rows - 行数(不滚动最多能显示的行数，影响输入框的高度)
            placeholder - 占位符
            maxlength - 限制输入的字符的个数
        -->
        <textarea name="message" rows="5" cols="" placeholder="请输入消息" maxlength="200">默认文字</textarea>
        
    </body>
</html>

03 div和span

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/css基础.css"/>
    </head>
    <body>
        <!--
            1.div和span都是无语义标签：网页中内容分组分块，都可以使用div作为容器
            
            2.html中标签分类：行内标签、块级标签
            块级标签：一个占一行，例如：div、h1、p、列表、table、tr、form、option...
            行内标签：一行显示多个，例如：span、font、td、input、select、textarea...
        -->
        <div id="">
            div1dfsdf
        </div>
        <div id="">
            div2
        </div>
        <span id="">
            span1
        </span>
        <span id="">
            span2
        </span>
        
    </body>
</html>

2019-01-22 web day2 表单标签

01表单标签（form）

02 select下拉菜单和textarea多行文本域

03 div和span

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读