首页 问答社区 web技术 正文

HTML表单标签

2021-02-06 16:42:20 175 0
tangjin

表单标签

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单标签</title>
</head>
<body>

    <form name="myform" action="#" method="post">

        <table>

            <tr>
                <td>
                    姓名
                </td>
                <td>
                    <input type="text" name="username" value="李四">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input type="password" name="password" value="">
                </td>
            </tr>
            <tr>
                <td>
                    性别
                </td>
                <td>
                    <input type="radio" name="sex" value="male">男
                    <input type="radio" name="sex" value="female" checked="checked">女
                </td>
            </tr>
            <tr>
                <td>
                    爱好
                </td>
                <td>
                    <input type="checkbox" name="hobby"  value="football" >足球
                    <input type="checkbox" name="hobby"  value="baskerball" checked="checked">篮球
                    <input type="checkbox" name="hobby"  value="paiqiu">排球
                </td>
            </tr>
            <!-- 下拉列表 -->
            <tr>
                <td>
                    地址
                </td>
                <td>
                    <select name="city"><!-- city=tj -->
                        <option value="bj">北京</option>
                        <option value="sh">上海</option>
                        <option value="tj" selected="selected">天津</option>
                    </select>

                </td>
            </tr>
            <tr>
                <td>
                    上传头像
                </td>
                <td>
                    <input type="file" name="file">
                </td>
            </tr> 

            <!-- 文本域 -->
             <tr>
                <td>
                    备注
                </td>
                <td>
                    <textarea name="remark" cols="30" rows="10">好好学习</textarea>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="submit"  value="提交">
                    <input type="button"  value="button">
                    <input type="reset"  value="reset">
                    <input type="image" src="images/btn.gif" alt="图片">
                    <input type="hidden" name="hide" value="monkey1024">
                </td>
            </tr>

        </table>

    </form>

</body>
</html>

标签说明： 这一节中的标签比较重要，在开发中会经常用到

1、form标签：<form></form>
    属性：    
        name:表单名称
        action:提交的路径地址
        method:提交方式（get，post，put，delete），其中get和post使用的多，如果不明确指出，则默认使用get方式。

        get和post的区别：
            (1)get提交将数据加在地址栏的后面，格式?name=value&name=value；post提交将数据封装在请求体中
                ?username=zhangsan&password=123&sex=male&hobby=football&hobby=basketball&city=tj#
            (2)get提交相对不安全；post提交相对安全
            (3)get提交有大小限制，根据浏览器不同而不同；post不限制大小


2、input标签：<input type=" "/>
    type属性:根据type属性实现各种不同功能的表单项；
        text：普通的文本输入框；
            name：username value="张三"<!--张三是默认值-->
        password：密码输入框；特点是显示的是掩码
        radio：单选按钮
            name：如果想让一组单选按钮互斥，就用指定同意name属性值，需要加value属性值；
            checked：默认被选中；                
        checkbox：复选框；
            name：组的概念，需要加value属性值。
            checked：默认被选中；
        file：上传文件的控件
        button：普通按钮，没有任何内置的功能；
        submit：内置功能，点击会按照action地址提交
        reset：重置，点击会清空之前填写的内容
        image：图片按钮，功能类似与submit
            src：加载图片
            alt:图片的提示文字
        hidden:隐藏表单，作用是在提交数据的时候，服务器需要这个数据，但是不需要用户看到。

    注意：name属性必须要写。

3、select标签(<select></select>)：下拉菜单
    属性：
        name;表单项的名称
    option标签：可选项（下拉菜单之间的级联）
        属性：
            value，表单项的值
            selected：默认被选中

4、textarea:文本域标签
    属性：
        cols：列数
        rows：行数
    注意：默认的文本值在标签体当中

HTML表单标签

html
收藏
分享
海报
0 条评论
175
上一篇：HTML链接标签和表格标签 下一篇：CSS概述

相关文章

本站已关闭游客评论，请登录或者注册后再评论吧~

忘记密码？

图形验证码