zoukankan      html  css  js  c++  java
  • 寒假Day34:HTML表单+多媒体+框架

    表单

    表单名称:不能包含特殊字符和空格。

    常见表单对象:文本框、下拉列表(select+option)。

    表单对象3:input、textarea、select和option。

    表单标签只有4个:<input>、<textarea>、<select>、<option>。

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表单</title>
    </head>
    <body>
    
        <form name="表单名称" action="表单的处理程序(地址)" method="post" target="_blank">  
        <!--name、action、method(传送方法)、target(目标显示方式)属性-->
            请输入:<input type="text" value="文本框"/><br/>
            <!--input自闭合标签-->
            <textarea></textarea><br/>
            <select>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </form>
    
    </body>
    </html>

    预览效果:

    多行文本框textarea语法:

    <textarea rows="行数" cols="列数">内容部分:</textarea>

    input属性值详细部分:

    文本框text/password(都是单行)语法:

    <input type="text/password" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>

    网页中按钮分为:普通按钮button、提交按钮submit、重置按钮reset。

    • 普通按钮语法:
    <input type="button" value="取值(按钮上的文字)" onclick="JavaScript脚本程序(按了按钮之后显示什么)"/>

    不提交数据到服务器的话,只要美观,可以使用button标签按钮。

     

    • 提交按钮语法:
    <input type="submit" value="取值(按钮上的文字)"/>
    • 重置按钮语法:
    <input type="reset" value="取值(按钮上的文字)"/>

    重置按钮清除内容范围:只能清除“当前所在form标签”内的表单元素内容

      

     单选按钮radio语法:

    <input type="radio" name="所在组名" value="取值"/>

    对于同一个问题的不同选项必须要设置一个相同的name属性值,否则会造成单选的选项用户可以全部选择,例如性别问题。

    复选框checkbox语法:

    <input type="checkbox" value="取值" checked="checked"/>

    其实我感觉还要加id属性的,具体原因看下面例子;

    html中的复选框是没有文本的,需要加入label标签,并且用label标签的for属性指向复选框的id。

    checked="checked"    表示默认被勾选
    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表单</title>
    </head>
    <body>
    
        <form name="表单名称" action="表单的处理程序(地址)" method="post" target="_blank">  
    
            你喜欢的东西:<br/>
            <input id="1" type="checkbox" checked="checked"/><label for="1">水果</label><br />
            <input id="2" type="checkbox" /><label for="2">运动</label><br />
            <input id="3" type="checkbox" /><label for="3">睡觉</label><br />
    
        </form>
    
    </body>
    </html>

    效果预览图:

      

     image语法

    <input type="image" src="图像路径"/>

    图片往往数据传输大,对于页面效果能不用图片就尽量不用图片,尽量使用CSS来实现。

    file:

    使用这个时,须在form的标签中说明编码方式,服务器才能接收到正确的信息

    enctype=“multipart/form-data”

    多媒体

    插入音频和视频:(有操作界面显示)

    <embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>

    后两者单位px

    插入背景音乐:(无操作界面显示、IE有效)

    <bgsound src="背景音乐地址" loop="播放次数">

    播放次数infinite/-1 代表无限次,且窗口最小化音乐停止

    插入flash:

    <embed src="多媒体文件地址" width="多媒体宽度" height="多媒体高度"></embed>

    后两者可以不写

    框架

    浮动框架:在一个页面嵌入一个或多个子页面

    浮动框架ifram语法:

    <iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>

    中间两者单位px,且可不写

    scrolling属性取值:auto(默认,整个表格在浏览器页面中左对齐)、yes(总是显示)、no(总是不显示)

    tips

    原来vs里面有自带html控件。。。

    根据需求去学习

  • 相关阅读:
    函数进阶:闭包、装饰器、列表生成式、生成器、迭代器
    函数基础:内置函数
    Python函数基础---参数、变量
    python函数基础:嵌套函数、作用域、匿名函数、高阶函数、递归函数
    三元运算、文件操作
    Python终端如何输出彩色字体
    文件处理: read、readline、 readlines()
    16进制、编码问题
    JSON 操作与转化
    高并发和大型网站架构相关
  • 原文地址:https://www.cnblogs.com/OFSHK/p/12368390.html
Copyright © 2011-2022 走看看