表格与表单

表格元素

-html中的表格 用table，colgroup，caption，thead，tfoot，tr，td 等元素来做表格，

<table border="1" cellpadding="5" cellspacing="0" width="400"   align="center">
    <colgroup bgcolor="pink">
        <col>
        <col bgcolor="red">
        <col bgcolor="yellow" span="2">
        <col>
        <col>
    </colgroup>
    <caption style="font-size: 1.5em;margin-bottom: 10px" >
        员工信息表
    </caption>
    <thead bgcolor="lightblue">
        <tr>
            <th>部门</th>
            <th>id</th>
            <th>姓名</th>
            <th>职务</th>
            <th>手机</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td rowspan="3">小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
        </tr>
        <tr>
            <td rowspan="3">小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
            <td>小王</td>
        </tr>
    </tbody>
    <tfoot align="center" bgcolor="gold">
        <tr>
        <td >小王</td>
        <td colspan="4">小王</td>
    </tr>
    </tfoot>
</table>

-感悟：在以前是用taoble 直接嵌套 tr和td ,用以上表格可以让代码更清晰 语句更严谨，更colgroup更严谨的操作了表单中的颜色不用 减少代码量

表单

简单的邮箱表单

-填写form 可以绑定label 点击label时获取焦点 type=”email” 类型是邮箱类型 required 是必填项 autofocus是自动获取焦点
-password是填写密码类型

 <section>
        <label for="userName">用户名：</label>
        <input type="text" name="name" id="userName" placeholder="不少于6位" maxlength="20" required autofocus>
    </section>
    <section>
        <label for="userPassword">密&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" name="password" id="userPassword" placeholder="请输入密码" required size="10">
    </section>

input单选框

• radio 类型 为单选框
  -checked 默认类型

<section>
        <label for="secret">性别:</label>
        <div class="sex">
            <input type="radio" name="gender" id="man"  value="man">
            <label for="man">男</label>
            <input type="radio" name="gender" id="woman" value="woman"  >
            <label for="woman">女</label>
            <input type="radio" name="gender" id="secret" value="secret" checked>
            <label for="secret">保密</label>
        </div>
    </section>

复选框

-checkbox类型
-写name时用数组的方式填写在后台处理是方便处理

<section>
        <label for="programme">兴趣:</label>
        <div class="box">
            <input type="checkbox" name="hobby[]"  value="game" id="game" checked>
            <label for="game">游戏</label>
            <input type="checkbox"  name="hobby[]"   id="travel" value="travel" checked>
            <label for="game">旅游</label>
            <input type="checkbox"  name="hobby[]"  id="shoot" value="shoot">
            <label for="game">摄影</label>
            <input type="checkbox"  name="hobby[]"  id="programme" value="programme">
            <label for="programme">编程</label>
        </div>
    </section>

文件域，隐藏域

-file类型

<section>
        <label for="userPic">头像:</label>
        <input type="file" name="user_pic" id="userPic">
        <!--隐藏域-->
        <input type="hidden" name="MAX_FILE_SIZE" value="8388608">
    </section>

预定义复合框

-类型text 后用datalist标签，里面option标签，填写value值即可
-<option >课程1</option> option是对标签这么写也可以

  <section>
        <label for="courses">课程</label>
        <input type="text" name="course" list="courses">
        <datalist id="courses">
            <option value="课程1"></option>
            <option value="课程2"></option>
            <option value="课程3"></option>
        </datalist>
    </section>

数字类型

-类型为number
-min=”18” 调节最小值
-max=”60” 调节最大值
-step=”5” 一次增加5或者减少5 5可以按需求填写

   <section>
        <label for="age">年龄：</label>
        <input type="number" id="age" min="18" max="60" step="5" name="age" value="20" form="register">
    </section>

按钮的用法

-可以在按钮中提交 formaction
-formmethod=”POST” 可以选择性的隐式提交和显式提交
-formtarget=”_blank” 新开页面或者当前页面

<section>
        <button formaction="login.php" formmethod="POST" formtarget="_blank">登录</button>
        <button formaction="res.php" formmethod="GET" formtarget="_blank">注册</button>
    </section>

表单域分组

-这里把表单分来开来提交 填写时也是分来填写
-<fieldset ></fieldset>是个对标签把表单分来 提交时可以一起提交也可以分开提交

<form action="" id="res"></form>
<!--第一个表单分组-->
<fieldset name="best" form="res">
    <legend>基本信息</legend>
    <section>
        <input type="email" name="email" placeholder="这是邮箱" form="res" autofocus>
        <input type="password" name="pas1" placeholder="你的密码" form="res" >
        <input type="password" name="pas2" placeholder="重复密码" form="res">
    </section>
</fieldset>
<!--第二个表单分组-->
<fieldset name="best" form="res">
    <legend>选填信息</legend>
    <section>
        <input type="text" name="nickname" placeholder="这是邮箱" form="res" autofocus>
        <input type="number" name="age" placeholder="年龄" form="res" >
    </section>
</fieldset>
<button type="submit" form="res" formmethod="post" formaction="res.php" formtarget="_blank">提交</button>

表单下拉

-<optgroup > </optgroup>表单下拉也可分组
-<select name="lang" id="lang" size="9" multiple> </select> 添加multiple 可以表单下拉时多选 size 是表单的大小

<form action="">
    <!--select有两个函数 可用 -->
    <!--click:点击时触发-->
    <!--onchange:当值发生了改变时触发-->
    <select name="lang" onchange="alert(this.value)"  onclick="alert(this.value)" >
        <optgroup label="前端" >
            <option value="课程1"  >课程1</option>
            <option value="课程2" selected>课程2</option>
            <option value="课程3">课程3</option>
        </optgroup>
        <!--分组-->
        <optgroup label="后端">
            <option value="课程4" label="课程4"></option>
            <option value="课程5" label="课程5"></option>
            <option value="课程6" label="课程6"></option>
        </optgroup>
    </select>
</form>

文本域

-<textarea></textarea>是文本域
-minlength文字最小长度和maxlength=最大长度

<form action="" id="common"></form>
    <textarea name="replay" id="" cols="30" rows="10" minlength="5" maxlength="50" form="common" placeholder="不超过50个字" onchange="alert('内容改变了')" onselect="this.style.color='red'">Hello World</textarea>
    <button type="submit" form="common" formaction="rex.php" formmethod="post">提交</button>

这是快捷方式 特殊记录一下

a{menu$}3
.main>.article>h3{php}3
header>nav>ul>li*5
```