HTML：iframe 表单语法（都需要name属性才能上传）表单的应用

最新推荐文章于 2022-06-09 19:28:54 发布

Suew.

最新推荐文章于 2022-06-09 19:28:54 发布

阅读量505

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/suewo/article/details/122648356

版权

一.ifram(内联框架，在一个网站里面嵌套另外一个网站)

src为路径
frameborder为边框
name为框架标识名

<body>


<iframe src="https://vip.iqiyi.com/cps_pc.html"
        frameborder="5"
        name="链接"
        height="800" width="800">

</iframe>


</body>

还可以制作页面跳转,用target="_blank"从新页面中打开

<iframe src=""
        frameborder="5"
        name="播放"
        height="500" width="500">

</iframe>
<a href="Mywebsite07%C2%A0媒体.html" target="_blank">点击</a>


</body>

二：表单语法<form></form>

action（表示向何处发送表单数据）：表单提交的位置，可以是网站，也可以是一个请求处理地址，必填
method（规定如何发送表单数据,即提交方式）：用get/post 必填
<input type="text">标签:生成文本框。（所有input标签都name=命名比较规范）
<input type="password">标签：同上

<body>

<h1>注册</h1>

<form action="Mywebsite04超链接标签.html" method="get">
  <p>名字:<input type="text" name="username"></p>
  <p>密码:<input type="password" name="pwd"></p>
  
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>

</body>

得到

点击提交就可以跳转到之后设置的网页，且在该网页右键-检查大有乾坤

三：表单元素格式

单选框标签

input type="radio"
value表示其单选框表示的值，如选择“男”就代表是boy，必有
name表示组，同一个name表示在一个组，只能单选了

 <p>性别</p>
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女孩
<!-- 用name将两个归为一组，只能单选-->
<!--radio必须有value,不然没有值 -->
   <p>
    <input type="submit">
    <input type="reset">
   </p>

多选框标签

<input type="checkbox" value="" 加checked表示默认选中> 必须有value

 <p>爱好：
       <input type="checkbox" value="sleep" name="hobby">睡觉
       <input type="checkbox" value="eat" name="hobby" checked>吃饭
       <input type="checkbox" value="run" name="hobby">跑步
       <input type="checkbox" value="tv" name="hobby">看电视
       <input type="checkbox" value="games" name="hobby">打游戏
       <input type="checkbox" value="music" name="hobby">听音乐
   </p>

按钮

<input type="button">普通按钮

<input type="image">图像按钮

<input type="submit">提交按钮
<input type="reset">重置按钮
value表示按钮上面显示的内容

<p>按钮：
        <input type="button" name="btn1" value="不要点我">
        <input type="image" src="E:\HTML\Resource\哈哈.jpg">
<!--图片也可以作为按钮-->
        <input type="submit">
        <input type="reset">
 
    </p>

下拉框

<select name="" id="" selected(此处加上selected当前栏已成为默认选中的值)></select>

<p>崽儿：
    <select name="">
        <option value="sheep" selected>咩咩</option>
        <option value="cow">哞哞</option>
        <option value="wolf">嗷呜</option>
        <option value="dog">汪汪</option>
        <option value="cat">喵喵</option>
    </select>
</p>

文本域

<textarea name="" id="" cols="30" rows="10"></textarea>

cols代表文本框长度，rows代表宽度

<p>反馈：
    <textarea name="area" id="" cols="30" rows="30">文本内容</textarea>

</p>

文件域

<input type="file" name="" >


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

邮箱验证

<input type="email" name="">

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

<input type="url" name="">

<P>URL:
    <input type="url" name="you">
</P>

数字

<input type="number" name="" >

<input type="number" >
可以用max，min限定输入范围
step限定每次间隔的数字


<p>数字：
    <input type="number" name="number" max="100" min="0" step="2">
</p>

滑块：

<input type="range" name=" ">

<p>音量
    <input type="range" name="voice" min="10" max="30" step="5">
</p>

搜索框

<input type="search" name=" ">

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

三：表单的应用

只读 read only，使该项不可被修改

<form action="Mywebsite06表格标签.html" method="get">
   <p>名字:<input type="text" name="username" value="admin" maxlength="10" size="30" readonly></p>
   <p>密码:<input type="password" name="pwd"></p>
</form>

默认值确定为admin，不可被修改

隐藏域

hidden

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

输入框消失了

禁用

disabled

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

此时无法选择男

增强鼠标可用性

<label for=""></label>
for="标记名"，在需要的位置放置一个标记与之对应


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

</p>

点击文字，会自动跳转到标记的搜索框

四：表单初级验证

placeholder(提示信息用于输入框写默认的提示用语)

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

required（非空判断）

用在所有的文本框中，使得内容不能为空

   <p>密码:<input type="password" name="pwd" required></p>

pattern（正则表达式）