表单提交、页面注册案例

最新推荐文章于 2023-09-14 11:30:41 发布

IT之一小佬

最新推荐文章于 2023-09-14 11:30:41 发布

阅读量460

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_44799217/article/details/115795239

版权

前端专栏收录该内容

31 篇文章 4 订阅

订阅专栏

表单属性设置

<form>标签表示表单标签，定义整体的表单区域

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写【‘get’和‘post’是HTTP协议】

【get方式提交数据到web服务器以地址栏的方式提交给服务器不安全，能够看到提交的数据，严谨的说是以查询参数的方式提交给web服务器；post方式提交数据表单数据会放到请求体里面】

表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

表单提交案例

 <form action="https://www.baidu.com" method="GET">
    <p>
        <label>姓名：</label><input type="text" name="username" value="张三" />
    </p>
    <p>
        <label>密码：</label><input type="password" name="password" />
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
    </p>
    <p>
        <label>个人描述：</label>
        <textarea name="about"></textarea>
    </p>
    <p>
        <label>籍贯：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>
    <p>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </p>
</form>

运行效果：

页面注册案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>

<body>
    <!-- 为了看清界面的排版，写代码时可以先加上border值 -->
    <!-- <table width="600" border="1" align="center"> -->
    <table width="600" align="center">
        <caption><h4>欢迎来到注册页面</h4></caption>
        <!-- 1 -->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" checked='checked' /><img src="images/man.jpg" /> 男
                <input type="radio" name="sex" /><img src="images/women.jpg" /> 女
            </td>
        </tr>
        <!-- 2 -->
        <tr>
            <td>生日</td>
            <td>
                <!-- 年份的 -->
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">1995</option>
                    <option value="">1996</option>
                    <option value="">1997</option>
                </select>
                <!-- 月份的 -->
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                </select>
                <!-- 日子 -->
                <select name="" id="">
                    <option value="">--请选择日子--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                </select>
            </td>
        </tr>
        <!-- 3 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="北京市朝阳区">
            </td>
        </tr>
        <!-- 4 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" checked="checked" /> 未婚
                <input type="radio" name="marry" /> 已婚
                <input type="radio" name="marry" /> 离婚
            </td>
        </tr>
        <!-- 5 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="研究生">
            </td>
        </tr>
        <!-- 6 -->
        <tr>
			<td>月薪</td>
			<td>
				<input type="text" value="10000-20000">
			</td>
        </tr>
        <!-- 7 -->
        <tr>
			<td>手机号码</td>
			<td>
				<input type="text">
			</td>
        </tr>
        <!-- 8 -->
        <tr>
			<td>昵称</td>
			<td>
				<input type="text" >
			</td>
        </tr>
        <!-- 9 -->
        <tr>
			<td>喜欢的类型</td>
			<td>
				<input type="checkbox" name="love" /> 妩媚的
				<input type="checkbox" name="love" /> 可爱的
				<input type="checkbox" name="love" /> 小鲜肉
				<input type="checkbox" name="love" /> 老腊肉
				<input type="checkbox" name="love" /> 都喜欢
			</td>
        </tr>
        <!-- 10 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea name="" id="" cols="30" rows="5">自我介绍</textarea>
            </td>
        </tr>
        <!-- 11 -->
        <tr>
            <td></td>
            <td>
                <input type="image" src="images/btn.png" />
            </td>
        </tr>
        <!-- 12 -->
        <tr>
			<td></td>
			<td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
        </tr>
        <!-- 13 -->
        <tr>
			<td></td>
			<td>
				<a href="#">我是会员，立即登录</a>
			</td>
        </tr>
        <!-- 14 -->
        <tr>
			<td></td>
			<td>
				<h3>我承诺</h3>
				<ul>
					<li>年满18岁</li>
					<li>谨遵入会规则</li>
				</ul>
			</td>
		</tr>
    </table>

</body>

</html>

运行效果：