ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML表单

2019-09-22 15:01:16  阅读:209  来源: 互联网

标签:get 标签 爱好 表单 HTML input type


表单工作原理:

 

 

 注:表单本身是不可见 的,我们在页面里看到的内容是具体的表单元素

 

 

 

 

 

 

<input>标签:

 

图像域(图像提交按钮,input中的type="image"):

 

 

 

隐藏域(input中的type="hidden"):

 

 

 

 

<select>标签:

 

 

 

 

<option>标签:

 

 

 

 

<textarea>多行文本域标签:

 

 

 

 

 

 

 

<form>标签:

 

 

 

post和get的区别(get的保密性比较差,因为它会把信息全都展示在外面):

 

 

 

 

 

 

 

 

注册信息表单完整示例:

效果图如下:

 

 

 

 

 

 

 

代码如下:

<form method="GET" action="info.php">
    <h1 align="center">注册信息</h1>
    <hr color="yellow">
    <table align="center" bgcolor="#f2f2f2" width="600px">
        <tr>
            <td align="right">姓名:</td>
            <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
        </tr>
        <tr>
            <td align="right">邮箱:</td>
            <td align="left"><input type="text" name="mail" size="25" maxlength="6" value="@163.com"/></td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td align="right">确认密码:</td>
            <td align="left"><input type="password" name="repaw" size="25" maxlength="6" placeholder="请确认密码"/></td>
        </tr>
        <tr>
            <td align="right">上传照片:</td>
            <td align="left"><input type="file" name="photo" /></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td align="left">
                男<input type="radio" name="sex" value="man"/>
                女<input type="radio" name="sex" value="woman"/>
            </td>
        </tr>
        <tr>
            <td align="right">爱好:</td>
            <td align="left">
                读书<input type="checkbox" name="aihao1" value="book"/>
                运动<input type="checkbox" name="aihao2" value="sport"/>
            </td>
        </tr>
        <tr>
            <td align="right">爱好的运动:</td>
            <td align="left">
                篮球<input type="checkbox" name="sport1" value="basketball"/>
                足球<input type="checkbox" name="sport2" value="football"/>
            </td>
        </tr>
        <tr>
            <td align="right">城市:</td>
            <td align="left">
                <select name="city">
                    <option value="select">请选择</option>
                    <option value="bj" selected>北京</option>
                    <option value="sh">上海</option>
                    <option value="cq">重庆</option>
                    <option value="tj">天津</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">简介:</td>
            <td align="left"><textarea name="text" placeholder="请输入简介" cols="40" rows="4"></textarea></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="click" name="button"/>
                <input type="submit" value="submit" name="submit"/>
                <input type="reset" value="reset" name="reset"/>
                <input type="image" name="reset" src="image-button.png"/>
            </td>
        </tr>
    </table>
</form>

  

 

标签:get,标签,爱好,表单,HTML,input,type
来源: https://www.cnblogs.com/helloCindy/p/11567523.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有