HTML之表单的制作

写博客的懒大王

于 2025-03-28 21:16:28 发布

阅读量312

点赞数 3

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/Ran_zz/article/details/146610521

版权

一，表单标签<form>

<form> 标签用于创建供用户输入的表单，在开始标签< form> 和结束标签</form>之间的部分就是一个表单的内容。

基本语法及格式：

<form name="表单名" action="URL" method="get|post">
    表单内容。。。。。。
</form>

二，表单元素 <input>

<input>用于定义用户输入数据的输入字段，根据不同 type 属性，输入字段可以是文本，密码，单选框，复选框等。

<input> 元素基本语法及格式：

<input type="表项类型" name="表项名" value="默认值" size="x" >

<input>元素输入字段：

1，文字和密码输入 password

<input type="text" name="文本框名">
<input typt="password" name="密码框名">

2，复选框和单选钮 checkbox ，radio

<input type="checkbox" name="复选框名" value="提交值" checked="checked">
<input type="radio" name="单选钮名" value="提交值" checked="checked">

实操演练

如图制作一个表格表单

在上一篇文章的基础上，结合本篇文章的内容制作。

<!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>
    <h2>用户注册</h2>
    <form action=""><table border="ipx" bgcolor="yellow">
        <tr>
            <td>用户名</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="item" id="item1">男
                <input type="radio" name="item" id="item2">女</td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>联系电话</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>电子邮件</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>最高学历</td>
            <td><input type="radio" name="item1" id="item1">中专
                <input type="radio" name="item2" id="item2">大专
                <input type="radio" name="item3" id="item3">本科
                <input type="radio" name="item4" id="item4">研究生
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                <input type="checkbox" name="item1" id="item1">上网
                <input type="checkbox" name="item2" id="item2">篮球
                <input type="checkbox" name="item3" id="item3">听歌
                <input type="checkbox" name="item4" id="item4">下棋
        </tr>
        <tr>
            <td colspan="2"><input type="subimit" value="提交" >
                <input type="subimit" value="重写"></td>
                   
        </tr>
    </table>
           
</body>
</html>