交作业2：HTML常用标签极速入门、表格、表单（2019-7-2） - PHP学习

2. 实例演示无序列表的基本使用
3. 实例演示表格的用法以及行列合并的应用
4. 实例演示表单以及常用控件元素的使用(必须掌握)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2019年7月2日直播课作业</title>
</head>
<body>
<!--作业1：html框架-->
<h2>作业1：html框架</h2>
<p>已完成</p>
<br>

<!--作业2：无序列表实例-->
<h2>作业2：无序列表实例</h2>
<ul>
    <li>无序列表内容1</li>
    <li>无序列表内容2</li>
    <li>无序列表内容3</li>
    <li>无序列表内容4</li>
    <li>无序列表内容5</li>
    <li>无序列表内容6</li>
    <li>无序列表内容7</li>
</ul>
<br>
<!--作业3：表格实例-->
<h2>作业3：表格实例</h2>
<table border="1" cellspacing="0" cellpadding="5" align="center" >
    <caption>采购单</caption>
    <tr>
        <td>序号</td>
        <td>名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>总价</td>
        <td>备注</td>
    </tr>
    <tr>
        <td>1</td>
        <td>CPU</td>
        <td>1350</td>
        <td>1</td>
        <td>1350</td>
        <td rowspan="5"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>内存</td>
        <td>450</td>
        <td>2</td>
        <td>900</td>
    </tr>
    <tr>
        <td>3</td>
        <td>显卡</td>
        <td>1800</td>
        <td>1</td>
        <td>1800</td>
    </tr>
    <tr>
        <td>4</td>
        <td>硬盘</td>
        <td>320</td>
        <td>1</td>
        <td>320</td>
    </tr>
    <tr>
        <td colspan="3">合计</td>
        <td>5</td>
        <td>4370</td>
    </tr>
</table>
<br>

<!--作业4：表单实例-->
<h2>作业4：表单实例</h2>
<h3>注册新用户</h3>
<p>请按照提示填写一下信息：</p>
<form>
    <p>
        <!--单行文本-->
        <label for="username">账户：</label>
        <input type="text" id="username" name="username" placeholder="不超过12字符" autofocus required>
        <!--autofocus：自动获取焦点,required 必填项-->
        <!--for与id必须相同，以便绑定控件-->
        <!--name为控件实例名称，便于程序控制-->
    </p>
    <p>
        <!--密码框-->
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="6-18个字符" autofocus required>
        <!--placeholder：框内默认显示文字-->
    </p>
    <p>
        <!--邮件框-->
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="example@mail.com" autofocus required>
        <!--required 必填项-->
    </p>
    <p>
        <!--纯数字框-->
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" placeholder="最小12，最大35。" min="12" max="35" autofocus>
        <!--min、max：限制最小和最大可输入的数字-->
    </p>
    <p>
        <!--日期控件-->
        <label for="birthday">生日：</label>
        <input type="date" id="birthday" name="birthday" >
    </p>
    <p>
        <!--下拉列表框控件-->
        <!--        select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型-->
        <!--        与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中-->
        <label for="usertype">用户类型：</label>
        <select id="usertype" name="usertype" size="1">
            <option value="0" selected>请选择</option>
            <optgroup label="个人用户：">
                <option value="0">个人用户</option>
                <option value="1">家庭用户</option>
            </optgroup>
            <optgroup label="企业用户：">
                <option value="2">股份公司</option>
                <option value="3">独资公司</option>
                <option value="4">外资企业</option>
            </optgroup>
        </select>
    </p>
    <p>
        <!--单选框控件-->
        <label for="nan">性别：</label>
        <!-- 点击"性别"标签会自动定位到"男"选项上，所以这里跟“男”的id值一样-->
        <!-- for应该与id一直，这样就可以实现文字点选，同一个id可以有多个for与之对应。 -->
        <input type="radio" name="gender" value="nan" id="nan"><label for="nan">男</label>
        <input type="radio" name="gender" value="nv" id="nv"><label for="nv">女</label>
        <input type="radio" name="gender" value="baomi" id="baomi"><label for="baomi">保密</label>
    </p>
    <p>
        <!--多选框控件-->
        <label for="game">爱好：</label>
        <input type="checkbox" name="aihao" id="game" value="game"><label for="game">游戏</label>
        <input type="checkbox" name="aihao" id="read" value="read"><label for="read">看书</label>
        <input type="checkbox" name="aihao" id="movie" value="movie"><label for="movie">电影</label>
    </p>
    <p>
        <!--文本域控件-->
        <label for="comment">说明：</label><br>
        <!--        文本域其实就是一个多行文本框-->
        <!--        不要设置value属性, 返回的文本在value属性中-->
        <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30个汉字"></textarea>
    </p>
    <p>
        <!--按钮控件-->
        <!--常用按钮分为2种：提交、重置-->
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
        <!--        重置不是清空, 只是恢复表单控件的默认状态或者默认值-->
        <!--        重置按钮现在极少用到啦-->
        <input type="button" name="button" value="普通按钮">
        <!--        普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据-->


        <!--        推荐使用button标签定义按钮-->
        <!--        默认也input:submit功能是一样的-->
        <button>提交1</button>
        <!--        等价于-->
        <button type="submit">提交2</button>
        <!--        普通按钮, 点击执行的行为, 由用户自定义-->
        <button type="button">提交3</button>
    </p>


    <!--
    总结：
    1、使用input标签的有：单行文本、密码框、数字框、日期控件、单选框、多选框、按钮。通过type属性确定控件类型。
    常用属性：
    type：确定控件类型；
    name：为控件命名名称。
    id：与label标签的 for 属性对应，用于绑定控件；
    value：多选框、单选、按钮用于存储提交的值，与页面上显示的值对应；
    placeholder：用于显示提示性文字；
    autofocus：自动获取焦点；
    required：必填项；
    min、max：最小、最大值；
    注意：单选、多选的多个选项中，name值必须一致，才能成为一组选项。value值必须不同，才能产生不同的选项。

    2、使用select标签的有：下拉框。
    常用属性：
    name：为控件命名名称。
    id：与label标签的 for 属性对应，用于绑定控件；
    value：用于存储提交的值，与页面上显示的值对应；
    通过option标签添加选项；
    通过optgroup标签对选项进行分组；

    3、使用textarea标签的有：文本域（多行文本）。
    常用属性：
    name：为控件命名名称。
    id：与label标签的 for 属性对应，用于绑定控件；
    cols、rows：设置行数和列数；
    maxlength：设置总字符数；
    placeholder：用于显示提示性文字；
    value：用于存储提交的值，但不需要设置，在文本域中填写的内容会自动赋值给value；

    4、使用label标签的有：标签控件。
    常用属性：
    for：与其他控件的 id 属性对应，用于绑定控件；

    5、使用button标签的有：按钮控件，按钮控件也可以使用input标签产生，通过type属性确定为按钮类型。
    常用属性：
    type：确定是那种按钮类型（提交、重置、普通按钮）；
    name：为控件命名名称。
    使用JS语言来确定按钮行为。
    -->
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：
1、使用input标签的有：单行文本、密码框、数字框、日期控件、单选框、多选框、按钮。通过type属性确定控件类型。
常用属性：
type：确定控件类型；
name：为控件命名名称。
id：与label标签的 for 属性对应，用于绑定控件；
value：多选框、单选、按钮用于存储提交的值，与页面上显示的值对应；
placeholder：用于显示提示性文字；
autofocus：自动获取焦点；
required：必填项；
min、max：最小、最大值；
注意：单选、多选的多个选项中，name值必须一致，才能成为一组选项。value值必须不同，才能产生不同的选项。

2、使用select标签的有：下拉框。
常用属性：
name：为控件命名名称。
id：与label标签的 for 属性对应，用于绑定控件；
value：用于存储提交的值，与页面上显示的值对应；
通过option标签添加选项；
通过optgroup标签对选项进行分组；

3、使用textarea标签的有：文本域（多行文本）。
常用属性：
name：为控件命名名称。
id：与label标签的 for 属性对应，用于绑定控件；
cols、rows：设置行数和列数；
maxlength：设置总字符数；
placeholder：用于显示提示性文字；
value：用于存储提交的值，但不需要设置，在文本域中填写的内容会自动赋值给value；

4、使用label标签的有：标签控件。
常用属性：
for：与其他控件的 id 属性对应，用于绑定控件；

5、使用button标签的有：按钮控件，按钮控件也可以使用input标签产生，通过type属性确定为按钮类型。
常用属性：
type：确定是那种按钮类型（提交、重置、普通按钮）；
name：为控件命名名称。
使用JS语言来确定按钮行为。

Correction status：qualified

Teacher's comments：作业写得好, 有总经, 有体会, 看来是用心了