1209作业-表格课程表|表单和属性

1209作业-课程表|表单

1、制作一个课程表

<table class="course" border="1">
    <caption>课程表</caption>
    <thead>
        <tr>
            <td colspan="2"></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">上午</td>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>2</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
            <td>体育</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>3</td>
            <td>物理</td>
            <td>化学</td>
            <td>体育</td>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>4</td>
            <td>化学</td>
            <td>体育</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
        </tr>
        <tr>
            <td colspan="7">中午休息</td>
        </tr>
        <tr>
            <td rowspan="3"></td>
            <td>5</td>
            <td>体育</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>6</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>7</td>
            <td>课外活动</td>
            <td colspan="4">自由活动</td>
        </tr>
    </tbody>
</table>

2、表单控件课例全演

Form表单

<form action="checkForm.php" method="POST" class="checkForm" id="checkForm" enctype="multipart/form-data">
    <p>
        <label for="text-field">text</label>
        <input type="text" name="text" id="text-field" value="" placeholder="tipText" required="required" />
    </p>
    <p>
        <label for="email-field">email</label>
        <input type="email" name="email" id="email-field" value="" placeholder="demo@abc.com" />
    </p>
    <p>
        <label for="password-field">password</label>
        <input type="password" name="password" id="password-field" value=""  />
    </p>
    <p>
        <label for="#">radio</label>
        <input type="radio" name="radio" id="radio-field-1" value="1" checked="checked" /><label for="radio-field-1">radio1</label>
        <input type="radio" name="radio" id="radio-field-2" value="2" /><label for="radio-field-2">radio2</label>
    </p>
    <p>
        <label for="#">checkbox</label>
        <input type="checkbox" name="checkbox[]" id="checkbox-field-1" value="1" /><label for="checkbox-field-1">checkbox1</label>
        <input type="checkbox" name="checkbox[]" id="checkbox-field-2" value="2" /><label for="checkbox-field-2">checkbox2</label>
    </p>
    <p>
        <label for="select-field">select</label>
        <select name="select" id="select-field">
            <option value="1" selected="selected">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </p>
    <p>
        <label for="file-field">file</label>
        <input type="file" name="file" id="file-field" />
        <span class="tips"></span>
    </p>
    <p>
        <label for="textarea-field">textarea</label>
        <textarea name="textarea" id="textarea-field" cols="30" rows="10" placeholder="textareaTips"></textarea>
    </p>
    <p>
        <input type="hidden" name="hidden" value="hide" />
        <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
        <button type="submit">submit</button>
    </p>
</form>

Form属性

<form action="checkForm2.php" method="POST" class="checkForm" id="checkForm2"></form>
<p>
    <label for="text-field">text</label>
    <input type="text" name="text" id="text-field" value="" placeholder="tipText" required="required" form="checkForm2" />
</p>
<p>
    <label for="email-field">email</label>
    <input type="email" name="email" id="email-field" value="" placeholder="demo@abc.com" form="checkForm2" />
</p>
<p>
    <button type="submit" form="checkForm2">submit</button>
</p>