HTML CSS

HTML入门三之表单

2020-12-09  本文已影响0人  码农修行之路
表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
    <!-- 表单标签 form 其有几个属性 action（提交地址） method（get post提交方式） enctype（编码方式）一般采用默认就可以了 target（指定目标窗口打开方式 和 a 标签用法一致） -->
    <!-- 表单name 为了防止页面中出现多个表单导致提交后后台程序出现混乱的问题 通过name属性来给表单进行命名 -->
    <form name="login" action="xiaohuang.com" method="post" target="_self"><!-- 表单名称不能有特殊字符和空格 -->
        <!-- 主要有四个标签需要记忆使用 input(单标签) textarea select option -->
        <!-- input 一些常用type属性 -->
        <!-- 
            text 文本框
            password 密码框
            button 普通按钮 submit 提交按钮
            reset 重置按钮
            iamge 图片形式的按钮
            radio 单选按钮
            checkbox 复选框
            hidden 隐藏字段
            file 文件上传
         -->
         <!-- value 默认值 size 文本框长度10 maxlenght 最大输入字符10  -->
         用户名：<input type="text" name="登录账号" value="请输入用户名"><br />
         姓&nbsp;&nbsp;&nbsp;名：<input type="text" name="姓名" value="请输入姓名" maxlength="4" /><br />
         性&nbsp;&nbsp;&nbsp;别：
         <!-- 对于radio来说 name值相同 代表选项只可选择一个 单选 -->
         男：<input type="radio" name="性别" checked="checked" />
         女：<input type="radio" name="性别" /><br />
         年&nbsp;&nbsp;&nbsp;龄：<input type="text" name="年龄" value="18"><br />
         爱&nbsp;&nbsp;&nbsp;好：
         <!-- 复选框是可以多个同时选择的 并且没有文本 -->
         <!-- lable 标签给复选框添加文本描述 并且lable标签中for指向复选框的id
              和a标签的锚点定位相似
          -->
          <!-- checked="checked"属性 代表默认选中 也就是复选框初始状态 -->
          <!-- 注意：复选框checkbox必须和label标签配合使用 -->
         <input type="checkbox" id="hg" checked="checked" /><label for="hg">火锅</label>
         <input type="checkbox" id="lx" /><label for="lx">旅行</label>
         <input type="checkbox" id="sy" /><label for="sy">摄影</label>
         <input type="checkbox" id="yy" checked="checked" /><label for="yy">音乐</label>
         <input type="checkbox" id="lq" checked="checked" /><label for="lq">篮球</label>
         <input type="checkbox" id="yy" /><label for="yy">游泳</label><br />
         密&nbsp;&nbsp;&nbsp;码：<input type="password" name="密码" /><br />
         密&nbsp;&nbsp;&nbsp;码：<input type="password" name="确认密码" /><br />
         <!-- 表单按钮是无法插入其它内容 -->
         <input type="button" value="注册" onclick="alert('注册')" />
         <input type="submit" value="提交" onclick="alert('提交')" />
         <!-- 针对form表单内的元素有效 -->
         <input type="reset" value="重置" />
         <!-- 普通按钮：一般与js脚本结合在一起来实现一些特效 -->
         <!-- 提交按钮：主要是把当前表单数据提交到服务器处理 -->
         <!-- 重置按钮：清除当前表单中所有输入的信息 也就是初始化状态 -->

         <!-- 图片按钮 src="相对或绝对路径" -->
         <input type="image" src="../img/sina.png" />
         <!-- 隐藏域 预览页面是不显示的 不过可以通过源码看到 -->
         <!-- 主要作用传递一些隐藏数据给服务器 不让用户看见 -->
         <!-- 一般不要使用隐藏域传递敏感信息 密码 手机号 年龄（haha）等 -->
         <input type="hidden" value="隐藏" ><br />
         <!-- 文件域 可以提交文件 图片 视频 文本文件等 -->
         <!-- 如果表单中需要传递文件 编码方式需要修改为 enctype="multipart/form-data" -->
         <input type="file"><br />
         <!-- 文本域 rowspan 行数 colspan 列数-->
         <textarea>简介</textarea><br />
         <textarea rows="8" cols="10">简介</textarea>

         <!-- 下拉列表 -->
         <!-- select 属性 multiple选择多项  size 下拉框显示几行-->
         <!-- selected 默认选中 -->
         <select>
            <!-- <select multiple="multiple" size="3"> -->
            <option>上海</option>
            <option value="北京" selected="selected">北京</option>
            <option>广州</option>
            <option>深圳</option>
            <option>郑州</option>
            <option>安徽</option>
         </select>

    </form>

    <!-- button标签可以插入文本 图片等内容 表单中的button按钮不能插入内容 -->
    <button>button标签</button>
    <button><img src="../img/android.png"></button>

</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读