HTML11-19

HTML(Hyper Text Markup Language)-超文本标记语言

11-19

11.iframe内联框架

<iframe src="" name="mainFrame"></iframe>
<!--
-self  调出自己的窗口
-blank 打开新的窗口
-->

path->引用页面地址

name->框架标识名

12.表单语法

<form method="post" action="result.html">
<p>名字：<input name="name" type="text"></p>
<p>密码：<input name="pass" type="password"></p>
<p>
    <input type="submit" name="Button" value="提交"> 
    <input type="result" name="Reset" value="重填"> 
</p>
</form>
<!--
post -> 规定如何发送表单数据常用值，get|post
result -> 表示向何处发送表单数据
-->

13.文本框和单选框

属性	说明
type	指定元素的类型，text、password、checkbox、radio、submit、reset file、hidden、image和button、默认为text
name	指定表达元素的名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位， 对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

<!--
文本输入框：input type= "text“
value="cafunedd"  默认初始值
maxlength="8" 最长能写几个字符
 size="30" 文本框的长度
-->
    <p>名字: <input type="text" name="username" ></p>
<!--密码框:input type = "password"-->
    <p>密码: <input type="password" name="pwd"></p>

<!--单选框标签
input type = "radio"
value：单选框的值
name:表示组
-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

14.按钮和多选框

<!--多选框
input type="checkbox"
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">打游戏
    </p>

<!--按钮
input type="button" 普通的按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置
-->
    <p>
        <input type="button" name="btn1" value="long">->value按钮的名字
        <input type="image" src="../resource/image/1.jpg">
    </p>


    <p>
        <input type="submit">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="清空表单">
    </p>

15.列表框文本域和文件域

<!--下拉框，列表框
selected:默认选择
checked:默认选择
    -->
    <p>下拉框：
        <select name="国家">
            <option value="中国">CN</option>
            <option value="美国">USA</option>
            <option value="瑞士" selected>ETH</option>
            <option value="印度">INDIA</option>
           </select>
    </p>

<!--文本域
-->
    <p>反馈:
        <p><textarea name="textarea" cols="30" rows="10"></textarea></p>
    </p>

<!--文件域
input type="file"
name="file"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

16.搜索框滑块和简单验证

<!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
<!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
<!--数字验证-->
    <p>数组:
        <input type="number" name="number" max="100" min="0" step="20"> ->step步长
    </p>
<!--滑块
input type="range"
-->
    <p>音量:
        <input type="range" name="voice" min="10" max="100" step="1">
    </p>
<!--搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>

17.表单的应用

隐藏域 hidden

<p>密码: <input type="password" name="password" hidden value="123456"></p>

只读 readonly

<p>名字: <input type="text" name="username" value="admin" readonly></p>

禁用 diabled

<input type="radio" value="boy" name="sex" checked disabled/>男

18.表单的初级验证

常用方式

placeholder 提示信息

<p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>

required 非空判断

<p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>

pattern 正则表达式

19.HTML总结