11.10 javaweb day3 表格，表单标签

表格标签

: 定义表格整体，可以包裹多个, 1.border：表格边框的宽度 2.width：规定表格的宽度 3.cellspacing：规定单元之间的空间 : 表格的行，可以包裹多个

: 单元格，表头单元格可以换成

	: 单元格，表头单元格可以换成	<body> `<table border="3px" cellspacing="2" width="600px"> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>照片</th> </tr> <tr> <td>1</td> <td>烂命华</td> <td>48</td> <td>男</td> <td><img src="C:\Users\len\Pictures\Screenshots\屏幕截图 2024-11-03 184327.png" width="100px"></td> </tr> <tr> <td>2</td> <td>李四</td> <td>19</td> <td>男</td> <td><img src="C:\Users\len\Pictures\Screenshots\屏幕截图 2024-11-03 184027.png" width="80px"></td> </tr> </table>` </body> 表单标签 : 主要是采集数据，长得和小窗口一样 1.action：表单提交的url，默认提交到当前页面 2.method：表单的提交方式 1.get：在url后面拼接表单数据，url长度有限制，默认值 2.post：在消息体（请求体）中传递，参数大小无限制表单项： 1.:定义表单项，通过type属性控制输入形式 type="text"：单行文本输入框，如输入用户名。 type="password"：密码输入框，输入内容隐藏。 type="radio"：单选按钮，同组中选唯一，如选性别。 type="checkbox"：复选框，可多选，如选兴趣爱好。 type="submit"：提交按钮，将表单数据发往服务器。 type="reset"：重置按钮，重置表单输入项值。 type="email"：电子邮件输入框，有格式校验。 type="number"：数字输入框，限输数字，可设范围等。 type="date"：日期输入框，有日期选择器。 type="time"：时间输入框，有时间选择器。 type="hidden"：隐藏输入框，传递隐藏数据。 2. 3.:定义文本域</p> <!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> form { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; } <pre><code>label { display: block; margin-bottom: 5px; } input[type="radio"], input[type="checkbox"] { margin-right: 5px; } </code></pre> </style> </head> <body> <!-- 表单开始 --> <form action="submit.php" method="post"> <!-- 用户名输入框 --> <label for="username">用户名：</label> <input type="text" id="username" placeholder="请输入用户名" /> <pre><code><!-- 密码输入框 --> <label for="password">密码：</label> <input type="password" id="password" placeholder="请输入密码" /> <!-- 性别选择单选按钮组,name要一样 --> <label for="gender">性别：</label> <input type="radio" id="male" name="gender" value="male" /> <label>男</label> <input type="radio" id="female" name="gender" value="female" /> <label>女</label> <!-- 兴趣爱好复选框组 --> 兴趣爱好： <label> <input type="checkbox" id="reading" value="reading" /> 阅读</label> <label></label><input type="checkbox" id="music" value="music" /> 音乐</label> <label></label><input type="checkbox" id="sports" value="sports" /> 运动</label> <!-- 邮箱输入框 --> <label for="email">邮箱：</label> <input type="email" id="email" placeholder="请输入您的邮箱" /> <!-- 数字输入框 --> <label for="number">数字：</label> <input type="number" id="number" min="1" max="100" step="1" placeholder="请输入一个 1 到 100 之间的数字" /> <!-- 日期输入框 --> <label for="date">日期：</label> <input type="date" id="date" /> <!-- 时间输入框 --> <label for="time">时间：</label> <input type="time" id="time" /> <!-- 描述，文本输入框 --> 描述：<textarea name="description" cols="30" rows="10" ></textarea> <br><br> <!-- 提交按钮 --> <input type="submit" value="提交" style="margin-top: 15px; display: block; width: 100%;" /> <!-- 重置按钮 --> <input type="reset" value="重置" style="margin-top: 5px; display: block; width: 100%;" /> <!-- 隐藏输入框 --> <input type="hidden" name="form_id" value="12345" /> </code></pre> </form> <!-- 表单结束 --> </body> </html>

<body>

<table border="3px" cellspacing="2" width="600px">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>照片</th>
    </tr>
    <tr>
        <td>1</td>
        <td>烂命华</td>
        <td>48</td>
        <td>男</td>
        <td><img src="C:\Users\len\Pictures\Screenshots\屏幕截图 2024-11-03 184327.png" width="100px"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>19</td>
        <td>男</td>
        <td><img src="C:\Users\len\Pictures\Screenshots\屏幕截图 2024-11-03 184027.png" width="80px"></td>

    </tr>

</table>

</body>

表单标签

: 主要是采集数据，长得和小窗口一样 1.action：表单提交的url，默认提交到当前页面

2.method：
表单的提交方式
1.get：在url后面拼接表单数据，url长度有限制，默认值
2.post：在消息体（请求体）中传递，参数大小无限制

表单项：

1.:定义表单项，通过type属性控制输入形式
type="text"：单行文本输入框，如输入用户名。
type="password"：密码输入框，输入内容隐藏。
type="radio"：单选按钮，同组中选唯一，如选性别。
type="checkbox"：复选框，可多选，如选兴趣爱好。
type="submit"：提交按钮，将表单数据发往服务器。
type="reset"：重置按钮，重置表单输入项值。
type="email"：电子邮件输入框，有格式校验。
type="number"：数字输入框，限输数字，可设范围等。
type="date"：日期输入框，有日期选择器。
type="time"：时间输入框，有时间选择器。
type="hidden"：隐藏输入框，传递隐藏数据。

3.:定义文本域</p> <!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> form { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; } <pre><code>label { display: block; margin-bottom: 5px; } input[type="radio"], input[type="checkbox"] { margin-right: 5px; } </code></pre> </style> </head> <body>  <form action="submit.php" method="post">  <label for="username">用户名：</label> <input type="text" id="username" placeholder="请输入用户名" /> <pre><code> <label for="password">密码：</label> <input type="password" id="password" placeholder="请输入密码" />  <label for="gender">性别：</label> <input type="radio" id="male" name="gender" value="male" /> <label>男</label> <input type="radio" id="female" name="gender" value="female" /> <label>女</label>  兴趣爱好： <label> <input type="checkbox" id="reading" value="reading" /> 阅读</label> <label></label><input type="checkbox" id="music" value="music" /> 音乐</label> <label></label><input type="checkbox" id="sports" value="sports" /> 运动</label>  <label for="email">邮箱：</label> <input type="email" id="email" placeholder="请输入您的邮箱" />  <label for="number">数字：</label> <input type="number" id="number" min="1" max="100" step="1" placeholder="请输入一个 1 到 100 之间的数字" />  <label for="date">日期：</label> <input type="date" id="date" />  <label for="time">时间：</label> <input type="time" id="time" />  描述：<textarea name="description" cols="30" rows="10" ></textarea> <br><br>  <input type="submit" value="提交" style="margin-top: 15px; display: block; width: 100%;" />  <input type="reset" value="重置" style="margin-top: 5px; display: block; width: 100%;" />  <input type="hidden" name="form_id" value="12345" /> </code></pre> </form>  </body> </html>

posted on 2024-11-10 16:49 刘晋宇阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

Yunyuzuiluo

11.10 javaweb day3 表格，表单标签

表格标签

表单标签

表单项：

导航

公告