HTML表单标签

表单标签

<!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:行数
    注意:默认的文本值在标签体当中