KKB:表格标签、表单标签，html5的新内容

程序员文章站 2022-06-18 19:22:17

表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。 xxxx有很多的选择具体在下⾯有详解：如： *type属性:表示表单项的类型:值如下: text:单⾏⽂本框 password:密码输⼊框 checkbox:多选框注意要提供value值 radio:单选框 ....

表格标签

使用table>tr>th*4 ：可以快速创建

tr>td*4

表单项标签

表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。

<input type="xxxx" name="username"> xxxx有很多的选择

 具体在下⾯有详解：
 如：<input type="text" name="username">
 *type属性:表示表单项的类型:值如下:
 text:单⾏⽂本框
 password:密码输⼊框
 checkbox:多选框 注意要提供value值
 radio:单选框 注意要提供value值
 file:⽂件上传选择框
 button:普通按钮
 submit:提交按钮
 image:图⽚提交按钮
 reset:重置按钮, 还原到开始(第⼀次打开时)的效果
 hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
 email ⽤于应该包含 e-mail 地址的输⼊域
 url ⽤于应该包含 URL 地址的输⼊域
 number ⽤于应该包含数值的输⼊域。
 max 规定允许的最⼤值
 min 规定允许的最⼩值
 step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
 value 规定默认值
 range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条
 max 规定允许的最⼤值
 min 规定允许的最⼩值
 step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
 value 规定默认值
 ⽇期选择器 Date pickers
 date - 选取⽇、⽉、年
 month - 选取⽉、年
(3) <select>...</select> 标签创建下拉列表。
(4) <textarea>...</textarea> 多⾏的⽂本输⼊区域
(5) <button>...</button> 标签定义按钮。
 week - 选取周和年
 time - 选取时间（⼩时和分钟）
 datetime - 选取时间、⽇、⽉、年（UTC 时间）
 datetime-local - 选取时间、⽇、⽉、年（本地时间）
 search ⽤于搜索域，⽐如站点搜索或 Google 搜索
 color 颜⾊选择
 *name属性: 表单项名,⽤于存储内容值的
 *value属性: 输⼊的值(默认指定值)
 *placeholder: 预期值的简短的提示信息
 size属性: 输⼊框的宽度值
 maxlength属性: 输⼊框的输⼊内容的最⼤⻓度
 readonly属性: 对输⼊框只读属性
 *disabled属性: 禁⽤属性
 *checked属性: 对选择框指定默认选项
 accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
 tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)

 src和alt是为图⽚按钮设置的

 注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空
 image图⽚按钮，默认具有提交表单功能。


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML form表单：form input select textarea</h1>
    <form action="c.html" method="POST">
        <fieldset style="width: 300px;">
            <legend>个人信息</legend>
            姓名:<input type="text"/><br>
            年龄:<input type="text"/><br>
        </fieldset>
        <fieldset style="width: 300px;">
            <legend>健康信息</legend>
            身高:<input type="text"/><br>
            体重:<input type="text"/><br>
        </fieldset>
        姓名:<input type="text" name="uname"/><br/><br/>
        密码:<input type="password" name="upass"/><br/><br/>
        性别:<input type="radio" name="sex" value="1" checked>男
            <input type="radio" name="sex" value="0">女<br/><br/>
        爱好:<input type="checkbox" name="hobby" value="1" checked>看书
        <input type="checkbox" name="hobby" value="2" size="20">洗澡
        <input type="checkbox" name="hobby" value="3" checked>打游戏<br/>
        头像:<input type="file" name="pic"/><br/><br/>
        邮箱<input type="email" placeholder="请输入邮箱" name="email"/><br/><br/>
        年龄<input type="number" name="age" min="10" max="88"/><br/><br/>
        指数<input type="range" name="range" min="10" max="88"/><br/><br/>
        网址<input type="url" value="www.baicu.com" readonly name="url"/><br/><br/>
        日期<input type="date" name="date"/><br/><br/>
        学历<select name="eduction" id="">
            <optgroup label="一般偏下">
                <option value="1">大专</option>
            </optgroup>
            <optgroup label="普通">
                <option value="2" selected>本科</option>
            </optgroup>
            <optgroup label="进阶">
                <option value="3">研究生</option>
                <option value="4">硕士</option>
            </optgroup> 
        </select><br/><br/>
        

        简介<textarea name="contents" id="" cols="30" rows="10">Hello Html5</textarea><br><br>
        <img src="./images/315633.jpg" width="200"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

运行的结果：

KKB:表格标签、表单标签，html5的新内容