machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form{
            margin-top: 100px;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    
    <form action="target.html">
        <!-- 文本框中的value值为默认值，如果不输入其他内容，提交的就是默认值的内容 -->
        <input type="text" name="username" value="hello">
        <br><br>

        <!-- 
            在文本框中输入内容时，会默认显示我们已经输入过的内容列表（自动补全功能）
            autocomplete="off"  可以关闭自动补齐功能
            但是它只能影响自己所在的输入框，对其他的输入框没有效果
                需要对其他的输入框进行单独的设置
            如果要把全部输入框的自动补全功能都关闭，可以在form标签中添加
         -->
        <input type="text" name="username" autocomplete="off">
        <br><br>

        <!-- 
            readonly    将表单项设置为只读，数据会提交
                本例中将不能对默认文字“hello”进行修改
         -->
        <input type="text" name="username" value="hello" readonly>
        <br><br>

        <!-- 
            disabled    将表单项设置为禁用，数据不会提交
                有点类似于readonly，只是输入框整个都会变成灰色的，readonly则不会
         -->
        <input type="text" name="username" value="hello" disabled>
        <br><br>

        <!-- 
            autofocus   设置表单项自动获取焦点
         -->
        <input type="text" name="username" autofocus>
        <br><br>


        <!-- 
            input的type类型为color时，会出现一个颜色选择按钮，可以选择颜色
                但实际开发中使用较少，主要是兼容性不太好
         -->
        <input type="color">
        <br><br>

        <!-- 
            input的type类型为email时，其显示效果和text没有区别，但是当输入内容后点击提交时，
                它会检查输入的内容是否符合邮件的格式，如果不符合，会弹出提示信息
                但是在IE中的提示信息不一样，所以也很少用
                color和email在PC端用的比较少，但是在移动端开发时用得比较多
         -->
        <input type="email">
        <br><br>

     
        <input type="submit">
        <input type="reset">
        <!-- reset可以将用户输入的值重新设置为默认值 -->
        <input type="button" value="按钮">
        <!-- 普通的按钮，这样设置的按钮点了以后没有任何反应，其功能需要配合js完成（用处广泛） -->
        <br><br>

        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
        <!-- 相比之下，button会使用的更多一些 -->
    </form>

</body>
</html>