HTML表单和验证及iframe内联框架

mzmm403
219 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天

iframe内联框架

在一个网页中嵌套另一个网页

<!--格式-->
<iframe src='path' name='mainFrame'</iframe>


<iframe src="www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>

<!-- 作为连接目标的ifram-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px">
</iframe>
<a href="http://www.mzmm403.top/baidu/#/" target="hello">点击跳转</a>
  • src：引用页面地址（必填）
  • name：框架标识名
  • w-h：宽度和高度

input标签

文本框和单选框

type="radio"(单选框)

input标签属性

image-20220617152530441.png

<p>性别:
	<input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

image-20220617153058012.png

单选框

  • value：单选框的值
  • name：表示组（如果两个选项不是一个组，那么就可以多选）
  • checked：默认选中

多选框和按钮

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>
  • checked：默认选中

image-20220617153727380.png

image-20220617154454088.png

按钮

type="button"(普通按钮)

type="image"(图像按钮)

type="submit"(提交按钮)

type="reset"(重置按钮)

<p>按钮:
    <input type="button" name="btn1" value="点击变长"/>
    <!--图片按钮-->
    <input type="image" src="path"/>
</p>

image-20220617154136164.png

  • 图片按钮：点击图片就可以带着信息转跳到表单的action
  • value：按钮的名字

文件域

type="file"(文件域)

<p>
    <input type="file" name="files"/>
    <input type="button" value="" name="upload"/>
</p>

效果：

image-20220617161116977.png

image-20220617161204698.png

滑块

<p>音量:
    <input type="range" name="voice" min="0" max="100" step="2"/>
</p>

效果：

image-20220617162633034.png

获取到的值：

image-20220617162703080.png

搜索框

<p>搜索:
    <input type="search" name="search"/>
</p>

效果：

image-20220617162848594.png

获取的值:

image-20220617162920320.png

简单验证

邮箱验证

<p>邮箱:
    <input type="email" name="email"/>
</p>

效果：

image-20220617161500138.png

URL验证

<p>URL:
    <input type="url" name="url"/>
</p>

效果：

image-20220617161649152.png

数字验证

<p>URL:
    <input type="number" name="num" max="100" min="0" step="10"/>
</p>

效果：

image-20220617161854142.png

  • max/min：数字的上下限
  • step：步长，按右侧按钮一次可增加的数字

列表框和文本域

下拉框

<p>国家:
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="US">美国</option>
        <option value="eth" selected>瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>

效果图：

image-20220617155511305.png

image-20220617155826384.png

  • selected：默认被选中（和多选框的checked类似）

文本域

<p>
    <textarea name="textarea" cols="50" row="10">文本内容</textarea>
</p>

效果:

image-20220617160622288.png

  • cols：行的长度
  • row：列的长度

表单

简单的表单

<h1>注册</h1>
<form method="post" action="result.html">
    <!--用户名输入框-->
    <p>名字:<input name="username" type="text"></p>
    <!--密码框-->
    <p>密码:<input name="pass" type="password"></p>
    <p>
        <!--提交按钮-->
        <input type="submit" name="Button" value="提交"/>
        <!--重置按钮-->
        <input type="reset" name="Reset" value="重置"/>
    </p>
</form>

image-20220617151952210.png

  • action：表单提交的位置（可以是网站也可以是一个请求处理地址）
  • method：psot、get提交方式
    • get提交我们可以在url中看到我们提交的信息，不安全，高效
    • post提交不会暴露密码，安全，post还可以传输大文件

表单的应用

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

<p>性别:
	<input type="radio" value="boy" name="sex" disabled/>男
    <input type="radio" value="girl" name="sex"/>女
</p>  

<p>密码:<input name="pass" type="password" hidden></p>
  • readonly：表示只能读，不能修改
  • disabled：表示不可选择被禁用（按钮被禁用）
  • hidden：隐藏域，直接将拥有该属性的隐藏

image-20220617163712585.png

怎强鼠标可用性

label标签

<label for="mark">点我试试</label>
<input type="text" id="mark">

鼠标可用性：点击文字即可自动跳转到后面的输入框中

表单的初级验证

为什么要进行表单验证

  1. 减轻服务器的压力
  2. 保证数据的安全性

常用方式

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


<p>邮箱:
    <input type="text" name="diymail" pattern="^[a-zA-Z0-9·-]+@[a-ZA-Zg-9-]+(\.[a-zA-Z0-9-]+)*\.(com cn net)$"/>
</p>

image-20220617164721963.png

  • required：不能为空，只要不填这项信息就不能正常提交
  • pattern：正则表达式（用正则来判断）如上方，我们可以自定义邮箱判断
avatar
文章
阅读
粉丝