html中表单的常用属性和案例

最新推荐文章于 2024-07-24 17:02:26 发布

m0_71703329

最新推荐文章于 2024-07-24 17:02:26 发布

阅读量409

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_71703329/article/details/132394380

版权

案例效果图

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
        }
       
    </style>
</head>
<body>
    <h1 >青春不常在，抓紧谈恋爱</h1>
    <table border="1px" cellspacing="0" align="center">
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" checked><img src="../images/man.jpg"><label>男</label>
                <input type="radio" name="sex">
                <img src="../images/women.jpg">
                <label>女</label>
            </td>
            </tr>
         <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年--</option>
                    <option>2001</option>
                    <option>2000</option>
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                </select>
                <select>
                    <option>--请选择月--</option>
                    <option>一月</option>
                    <option>二月</option>
                    <option>三月</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>一号</option>
                    <option>二号</option>
                    <option>三号</option>
                </select>
            </td>
        <tr>
            <td>所在地区</td>
        <td><input type="text" value="北京思密达"></td></tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" id="wei" name="hunyin" checked>未婚
                <input type="radio" id="yi " name="hunyin">已婚
                <input type="radio" id="wei" name="hunyin">离婚
            </td>

        </tr>
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="博士后">
            </td>
        </tr>
        <tr>
            <td>月薪</td>
            <td><input type="text" value="10000-20000"></td>
        </tr>
        <tr><td>手机号码</td>
        <td><input type="number"></td>
        </tr>
        <tr><td>昵称</td>
        <td>
            <input type="text">
        </td></tr>
        <tr><td>喜欢类型</td>
            <td>><input type="checkbox">妩媚的
                <input type="checkbox">可爱的
                <input type="checkbox">小鲜肉
                <input type="checkbox">老腊肉
                <input type="checkbox">都喜欢
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><img src="../images/btn.png"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="radio" checked="checked">我同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="">我是会员，立即登录</a>
                <a href="">前往修改页面</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><h3>我承诺</h3>
            <ul>
                <li>年满18岁，单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
            </td>
        </tr>
    </table>
</body>
</html>

用到的属性和样式

1. text-align: center;

对文本文字进行居中

2. <h1 >青春不常在，抓紧谈恋爱</h1>

标题标签，h1到h6 标题逐渐变小

3. <table border="1px" cellspacing="0" align="center">

table为表格标签，border为边框属性，cellspacing用来控制单元格之间的空隙

align属性用来控制水平对齐方式

4.<input type="radio" name="sex" checked>

input为输入标签，type属性用来控制输入框的类型，具体类型有

⑴ 单行文本框: type="text"
⑵ 密码框: type="password"
⑶ 复选框: type="checkbox"
⑷ 隐藏值: type="hidden"
⑸ 文件上传: type="file"
⑹ 图片提交按钮: type="image"
⑺ 按钮: type="button"
⑻ 单选按钮: type="radio"
⑼ 重置清空表单: type="reset"
⑽ 提交按钮: type="submit"

3.下拉选择框

</select>