【html】表单标签笔记

最新推荐文章于 2022-07-21 09:12:49 发布

Suxin.

最新推荐文章于 2022-07-21 09:12:49 发布

阅读量125

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_47391990/article/details/124176208

版权

表单标签：收集用户信息

1、表单域==<from>标签
   包含表单元素的区域----会把范围内的表单元素信息提交给服务器
   1、action-->url地址接收并存放至服务器url地址
   2、method-->get/post 设置表单的提交方式
   3、name-->名称设置表单名称，用于区分同意页面的多个表单域

2、表单控件
   1、input输入表单元素 -->type=“属性值”、name=“控件值名字”、value=“默认显示的值/返回后端人员查看的值”、maxlength=“最大输入值”、checked=“checked”默认选择
       button按钮
       radio单选按钮
       checkbox复选框
       file文件域，上传文件使用
       password密码
       submit提交按钮，会把form表格中的数据发送至服务器
       reset重置按钮
       button普通按钮
   2、<label>标签
       <label for ="sex">男</label>
       <input type="radio" name= "sex" id="sex"/>
   3、select下拉表单元素 --> selected=“selected”默认选择(写在option中)
       <select>
           <option>选项1</option>
           <option>选项2</option>
           <option>选项3</option>
       </select>
   4、textarea文本元素-->cols、rows 显示几行几列
       <textarea></textarea>

p56世纪佳缘练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世纪佳缘-你在我也在</title>
</head>
<body>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <form action="xxx.php" method="get">
        <table width="500">
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" id="boy" name="sex" checked="checked">
                    <label for="boy"><img src="image/boy.jpg" width="20" height="20">男</label>
                    <input type="radio" id="girl" name="sex">
                    <label for="girl"><img src="image/girl.jpg" width="20" height="20">女</label>

                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <select name="year" >
                        <option selected="selected">请选择年</option>
                        <option value="1990" >1990</option>
                        <option value="1991">1991</option>
                        <option value="1992">1992</option>
                        <option value="1993">1993</option>
                        <option value="1994">1994</option>
                        <option value="1995">1995</option>
                        <option value="1996">1996</option>
                        <option value="1997">1997</option>
                        <option value="1998">1998</option>
                        <option value="1999">1999</option>
                        <option value="2000">2000</option>
                    </select>
                    <select name="mouth" >
                        <option selected="selected">请选择月</option>
                        <option>1月</option>
                        <option>2月</option>
                        <option>3月</option>
                        <option>4月</option>
                        <option>5月</option>
                        <option>6月</option>
                        <option>7月</option>
                        <option>8月</option>
                        <option>9月</option>
                        <option>10月</option>
                        <option>11月</option>
                        <option>12月</option>
                    </select>
                    <select name="day">
                        <option selected="selected">请选择日</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" name="add" value="北京思密达">
                </td>
            </tr>
            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="marry" id="no" checked="checked">
                    <label for="no">未婚</label>
                    <input type="radio" name="marry" id="yes">
                    <label for="yes">已婚</label>
                    <input type="radio" name="marry" id="ex">
                    <label for="ex">离婚</label>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <input type="text" name="background" value="幼儿园">
                </td>
            </tr>
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="like" >妩媚的
                    <input type="checkbox" name="like" >可爱的
                    <input type="checkbox" name="like" >小鲜肉
                    <input type="checkbox" name="like" >老腊肉
                    <input type="checkbox" name="like" >都喜欢
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>自我介绍</textarea>
                </td>
            </tr>
            <tr>
                <td rowspan="4"></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" >我同意注册条款和会员加入标准
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#" target="_blank">我是会员，立即登录</a>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁，单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>