HTML表单实战

昼白 • 2020-10-21 • CSS/HTML/JavaScript, 所有文章, 编程教学 • 3691 阅读

       

代码如下

<from>
 <input type="text">
 <input type="text" value="昼白">
 <input type="text" placeholder="昼白">
 <input type="text" placeholder="限制输入最多6位" maxlength="6">
 <input type="password" placeholder="密码" maxlength="16">
 <input value="只读" readonly>
<input type="text" placeholder="表格长度增加"  size="30">
 <textarea>下方为代码对照</textarea>
 </from>

 

  1. 1.爱国
  2. 2.民主
  3. 3.自由
  4. 4.和谐

代码如下

<ol>
<li>爱国</li>
<li>民主</li>
<li>自由</li>
<li>和谐</li>
</ol>

 

标题文字

内容文字

 

对照

<fieldset>
<legend>标题文字</legend>
内容文字
</fieldset>

    网页 ，就是存储在服务器上的由HTML标签组成的文件，这个文件可以通过网络传输给客户端的浏览器，在浏览器中能够显示出对应视图（界面）

    3.1 HTML网页文件

    • 网页文件：就是一个后缀名为.htm或者.html的文件

    • HTML标签：由尖括号和特定的单词组成的组合，能够被浏览器解析的标记

      • 单标签

        <input/>

      • 双标签

        <html>
    子标签
</html>

    • HTML网页文件基本结构

      • 第一行通过doctype声明HTML文档规范

        <!DOCTYPE html>

      • 网页文件有一对根标签 html

      • html根标签包含两对子标签： head 和 body

        • head 声明页面相关的属性

        • body 用于定义网页中的内容

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>WITPT</title>
    </head>
    <body>  
        
    </body>
</html>

    3.2 常用的HTML标签

    3.2.1 显示标签
    用于将文本、图片、声音、视频显示在网页中

    • 文本

      <label style="color:orange;font-size:25px;font-family: 华文行楷;">武汉工程大学</label>

    • 图片

      <img width="300" height="100" src="img/d.jpg"/>

    • 声音

      <audio controls="controls" autoplay="autoplay" src="http://music.163.com/song/media/outer/url?id=1359595520"></audio>

    • 视频

      <video controls="controls" width="400" height="300"  src="http://music.163.com/song/media/outer/url?id=1359595520"></video>
    3.2.2 输入标签
    在网页中提供各种输入视图（文本框、单选按钮、复选框...）供用户输入数据

    • input

      <!--HTML4-->
文本输入框：<input type="text"/><br/>
密码输入框：<input type="password"/><br/>
文件选择框：<input type="file"/><br/>
单选按钮：<input type="radio"/><br/>
复选框：<input type="checkbox"/><br/>
普通按钮：<input type="button" value="点我呀"/><br/>
提交按钮：<input type="submit"/><br/>
重置按钮：<input type="reset"/><br/>
图片按钮：<input type="image" src="img/btn.bmp"/><br/>
​
<!--HTML5-->
颜色：<input type="color"/><br/>
日期：<input type="date"/><br/>
数字：<input type="number"><br/>

    • select 下拉菜单

      <select>
    <option value="">武汉</option>
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">深圳</option>
    <option value="">广州</option>
</select>

    • textarea 文本域 多行输入框

      <textarea rows="4" cols="20"></textarea>
    3.2.3 功能标签

    在网页中，没有特定的显示效果，但是能够实现特定的功能

    • 表单 form

      • form用于提交数据，当点击form中的submit按钮时，会将输入框的值提交到form表单action属性置顶的url

      • action属性，指定提交数据的目标地址

      • method属性，指定提交数据的方式，如果不指定默认为get；可选post（提交数据隐藏提交）

      • form表单中的输入框需要name属性

      <form action="https://www.baidu.com/s" method="get">
    <input type="text" name="wd" placeholder="请输入关键字">
    <input type="submit" value="百度一下"/>
</form>

    • 超链接 a

      • 点击文字跳转到href属性指向的地址（URL）

      <a href="page1.html">注册</a>
    3.2.4 布局标签

    • 换行 br

    • 表格 table

    本站部分文章资源来源于互联网，仅供学习交流，如若要商用，请购买正版！
    若不听劝告，网友造成出现一切后果，与本站本人无关
    本站有些资源未经测试，请注意网络安全，本站不对下载的资源造成的后果负责
    免责声明
    作者:昼白
    转载请注明来源：https://www.2bcnm.com/1699.htm
    THE END
    分享
    二维码
    打赏
    海报
    HTML表单实战
            代码如下 <from>  <input type="text">  <input type="text" value="昼白">  <input type="text" placeholder="昼白">  <……
    <<上一篇
    下一篇>>