form表单的学习

我的笔记

1.form表单是客户与浏览器交互的重要途径；

2.每个控件元素都有一个form属性，可用于js调用

3.隐藏域可以隐式向服务器传递信息，但用户不可见

4.label元素的for属性值=input控件的id属性值，用于鼠标移动到控件上时自动显示焦点

5.名值对，是每个控件都有的，基本上都在一行中体现，除了下拉列表的:name属性在select标签中，value属性在option标签中

6.fieldset与legend控件的成对使用，方便对表单添加分类和标题

7.datalist标签可以用于搜索提示

8.optgroup标签可以用于下拉列表备选内容的分组

9.diabled、raquired、selected属性都是布尔属性，其中，disabled属性用于：向用户显示，但是拒绝发送至服务器

10.关于复选框checkbox每个选项的名字可以用数组[]表示，方便提交服务器后的处理

我的作业：个人信息表

<!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>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data" name="" >
        <fieldset>
            <legend style="color:blue"><b>基本信息</b></legend><br>
            <div>
                <label for="uname">姓&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;</label>
                <input type="text" maxlength="30"  name="username" id="uname" required>
            </div><br>
            <div>
                <label for="secret">性&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;</label>
                男<input type="radio" name="gender" id="male" value="male">
                女<input type="radio" name="gender" id="female" value="female">
                保密<input type="radio" name="gender" id="secret" value="secret" checked>
            </div><br>
            <div>
                <label for=""pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;</label>
                <input type="password" name="" id="pwd" required>
            </div><br>
            <div>
                <label for="jg">籍&nbsp;&nbsp;&nbsp;&nbsp;贯:&nbsp;&nbsp;</label>
                <input type="text" name="jg" id="jg">
            </div><br>
            <div>
                <label for="tel">手机号：</label>
                <input type="number" name="tel" id="tel">
            </div><br>
            <div>
                <label for="qq">QQ&nbsp;&nbsp;号:&nbsp;&nbsp;</label>
                <input type="number" name="qq" id="qq" min="3" max="30"></div>
            <br>
            <div>
                <label for="birth">生&nbsp;&nbsp;&nbsp;&nbsp;日：</label>
                <input type="date" name="birthday" id="birth" value="2022-10-19" min="1900-01-01" max="2099-12-31">
            </div><br>
            <div>
                <label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
                <input type="email" name="email" id="email">
            </div><br>
            <div>
                <label for="url">博&nbsp;&nbsp;&nbsp;&nbsp;客：&nbsp;&nbsp;</label>
                <input type="url" name="url" id="url">
            </div>
            <br>
        </fieldset>
        <br><br>
        <fieldset>
            <legend style="color:blue"><b>附加信息</b></legend>
            <div>
                <label for="">兴趣爱好：</label>
                <input type="checkbox" name="hobby[]" value="sport" id="sport">体育
                <input type="checkbox" name="hobby[" id="read" value="read">读书
                <input type="checkbox" name="hobby[]" id="music" value="music">音乐
                <input type="checkbox" name="hobby[]" id="art" value="art">艺术
                <input type="checkbox" name="hobby[]" id="eat" value="eat">美食
                <input type="checkbox" name="hobby[]" id="other" value="other">其他
            </div><br>
            <div>
                <label for="edu">最高学历</label>
                <select name="edu" id="edu">
                <option value="" disabled selected>--请选择--</option>
            <optgroup label="义务教育">义务教育
                <option value="幼儿园">幼儿园</option>
                <option value="小学">小学</option>
                <option value="初中">初中</option>
            </optgroup>
            <optgroup label="中等教育">
                <option value="高中">高中</option>
                <option value="中专">中专</option>
            </optgroup>
            <optgroup label="高等教育">
                <option value="大专">大专</option>
                <option value="本科">本科</option>
                <option value="硕士">硕士</option>
                <option value="博士">博士</option>
            </optgroup>
            </select>
            </div><br>
            <div>
                <label for="lang">精通语言</label>
                <input type="search" name="search" id="search" list="details">
                <datalist id="details">
                    <option value="php">php</option>
                    <option value="html">html</option>
                    <option value="javascript">javascript</option>
                    <option value="css">css</option>
                    <option value="python">python</option>
                    <option value="java">java</option>
                    <option value="c++">c++</option>
                    <option value=".net">.net</option>
                </datalist>
            </div>
        </fieldset><br><br>
        <fieldset>
            <legend style="color:blue"><b>其他信息</b></legend>
            <div>
                <label for="avatar">上传头像：</label>
                <input type="file" name="avatar" id="avatar">
            </div><br>
            <div>
                <label for="sfzzm">身份证正面：</label>
                <input type="file" name="sfzzm" id="sfzzm">
            </div><br>
            <div>
                <label for="sfzfm">身份证反面：</label>
                <input type="file" name="sfzzm" id="sfzfm">
            </div><br>
            <div>
                <textarea name="jianjie" id="jianjie" cols="30" rows="10" placeholder="请输入个人简介"></textarea>
            </div>
        </fieldset><br>
            <div>
                <button type="submit" value="提交">提交</button>
            </div>
    </form>
</body>
</html>