【HTML】5.表单标签

来源：互联网发布：sql2000数据库下载编辑：程序博客网时间：2024/05/17 00:51

表单标签：<form>，可以与服务器端进行交互
- <input>：输入标签，接收用户输入信息，type属性指定输入标签的类型。
  - 文本框 text：输入的文本信息直接显示在框中。
  - 密码框 password：输入的文本以原点或者星号的形式显示。
  - 单选框 radio：如：性别选择。
  - 复选框 checkbox：如：兴趣选择。
  - 隐藏字段 hidden：在页面上不显示，但在提交的时候随其他内容一起提交，通常定义给服务器端提交的数据，而这些数据不需要显示在页面上。
  - 提交按钮 submit：是将所在表单中所有组件的数据提交到指定的服务器端。要想将表单数据提交到服务器端，每一个表单组件都需要定义name和valve属性，对于文本框或密码框这种输入内容不确定的组件，可以不定义valve，name要定义
  - 重置按钮 reset：将表单中填写的内容重置为初始值。
  - 按钮 button：可以为其自定义事件。
  - 文件上传 file ：会自动生成一个文本框，和一个浏览按钮，用于上传文件。
  - 图像 image ：具有提交功能，它可以替代submit按钮。
  - 选择标签 select ：提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。
    - 子项标签 option：属性 selected 没有属性值，加在其中一个子项上，子项就变成默认被选项。
  - 多行文本框 textarea：如：个人信息描述。

<body>    <form>    用户名称：<input type="text" name="username"/><br>    用户密码：<input type="password" name="passworld"/><br>    选择性别：<input type="radio" name="sex" value="boy" checked/>男    <input type="radio" name="sex" value="girl"/>女<br>    <!-- 用name进行分组，设为同一个组，单选框，保证只能选一个    checked="checked"标记属性，不用一定要有值，值就是其本身    添加标记属性，初始化选择性别时默认选中     -->    选择兴趣：<input type="checkbox" name="interest" value="音乐"/>音乐    <input type="checkbox" name="interest" value="运动"/>运动    <input type="checkbox" name="interest" value="漫画"/>漫画<br>    一个按钮：<input type="button" value="一个按钮" onclick="alert('点击按钮！')"/><br>    隐藏组件：<input type="hidden" name="age" value="20"/><br>    选择文件：<input type="file" name="file"/><br>    图片组件：<input type="image" src="1.jpg"/><br>    选择国家：<select name="country">                <option value="none">选择国家</option>                <option value="cn" selected>中国</option>                <option value="usa">美国</option>           </select><br>    个人介绍：<textarea rows="4" cols="20"></textarea><br>    <input type="submit" value="提交"/><input type="reset"/><br>    </form></body>

这里写图片描述

注册页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>我的页面</title></head><body><fieldset><legend>注册区域</legend>    <form>        <table border="1" cellspacing="0" cellpadding="10" width="600" >            <tr>                <th colspan="2">注册页面</th>            </tr>            <tr>                <td>用户名</td>                <td><input type="text" name="username"/></td>            </tr>            <tr>                <td>用户密码</td>                <td><input type="password" name="passworld"/></td>            </tr>                <tr>                <td>性别</td>                <td>                    <input type="radio" name="sex" value="boy"/>男                    <input type="radio" name="sex" value="girl"/>女                </td>            </tr>            <tr>                <td>兴趣</td>                <td>                    <input type="checkbox" name="interest" value="音乐"/>音乐                    <input type="checkbox" name="interest" value="运动"/>运动                    <input type="checkbox" name="interest" value="漫画"/>漫画                </td>            </tr>            <tr>                <td>国家</td>                <td>                    <select name="country">                        <option value="none">选择国家</option>                        <option value="Chinese">中国</option>                        <option value="USA">美国</option>                   </select>                </td>            </tr>            <tr >                <th colspan="2">                    <input type="submit" value="提交"/>                    <input type="reset"/>                </th>            </tr>        </table>    </form></fieldset> </body></html>

这里写图片描述

0 0