HTML表单

最新推荐文章于 2023-04-07 11:09:11 发布

XCXCode

最新推荐文章于 2023-04-07 11:09:11 发布

阅读量452

点赞数

本文链接：https://blog.csdn.net/a9876rtyui/article/details/103430409

版权

一、向服务器提交数据的两种方式：

1.通过表单向服务器提交数据

例如，在注册时或者登录时，用户名密码所在的就是一个表单，在表单中可以填写数据，填写完后通过提交表单可以向服务器提交数据。

2.通过超链接向服务器提交数据

可以在超链接后面通过问号拼接参数。问号后面都是参数，参数分为参数名（比如user和age）和参数值（zhangsan和18），多个参数中间用&分隔。当我们点击超链接跳转到超链接所指定的地址时，将会连着问号后面的参数一起带给服务器。

<a href="http://www.baidu.com?user=zhangsan&age=18">百度一下</a>

二、表单标签

form标签就是表单标签，用于定义一个表单。其中action是必须存在的属性，用于指定表单的提交地址。比如，百度的注册表单中的action属性指定的就是百度服务器的地址。

<form action=""></form>

三、表单项标签

1.input标签

(1)普通文本输入框

用户名: <input type="text"  name="username"/>
昵称: <input type="text"  name="nickname"/>
邮箱: <input type="text"  name="email"/>
验证码: <input type="text"  name="verifycode"/>

(2)密码输入框

密码: <input type="password" name="pwd"/>
确认密码: <input type="password" name="repwd"/>

(3)单选框

性别: <input type="radio" name="gender" value="male"/>男
性别: <input type="radio" name="gender" value="female"/>女

(4)复选框/多选框

爱好: <input type="checkbox" name="like" value="basketball"/>篮球
爱好: <input type="checkbox" name="like" value="football"/>足球
爱好: <input type="checkbox" name="like" value="baseball"/>棒球

(5)提交按钮

<input type="submit" value="注册"/>

(6)普通按钮
普通按钮本身没有功能，可以通过JS为按钮赋予某些行为。

<input type="button" value="换一张"/>

2.select、option标签

select用于定义一个下拉选框，option用于定义下拉选框中的选项。

<!-- 城市 -->
<select name="city"><!-- 下拉选框 -->
    <option value="bj">北京</option><!-- 选项 -->
    <option value="sj">上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

3.textarea标签

textarea用于定义一个多行的文本输入区域, 也叫做多行输入框。

<textarea name="desc" cols="30" rows="5" 
              placeholder="请输入描述信息..."></textarea>

四、表单中的问题

1.提交表单时，表单中的数据为什么没有被提交？

在表单中，每一个要提交数据的表单项标签都要具有name属性，如果表单项标签没有name属性，在表单提交时，该项默认会被忽略。例如：

<!--  用户名 -->
<input type="text" name="username"/>
<!--  密码 -->
<input type="password" name="pwd"/>

2.如何让多个单选框只能有一个被选中？

设置这多个单选框的name属性值相同，如果name相同，这多个单选框就默认是一个组，一个组就只能选中一个选项。

<!-- 性别 -->
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女

3.为什么单选框、复选框选择后提交时的值都是on?

如果单选框或复选框没有设置value属性，选择任何一个选项最终提交的值都是on，这样服务器无法区分用户到底选择是什么选项。因此我们需要通过value属性为单选框和复选框设置提交时的值，例如：

<!-- 爱好 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" name="like" value="football"/>足球
<input type="checkbox" name="like" value="velloyball"/>排球

4.如何设置单选框或复选框默认选中某一项?

只需要在单选框或复选框上面添加一个属性: checked=“checked”，例如：

单选框: <input type="radio" name="gender" value="female"
                  checked="checked"/>女
复选框: <input type="checkbox" name="like" value="football"
                  checked="checked"/>足球

5.如何设置下拉选框默认选中某一项?

如果不设置，下拉选框默认选中的第一个选项，可以通过 selected="selected"属性设置某一项默认被选中，例如：

<select name="city"><!-- 下拉选框 -->
    <option>北京</option><!-- 选项 -->
    <option>上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

6.下拉选框中option选项上的value属性的作用是什么？

选中某一个option，在表单提交时，如果option上没有value属性，就提交option标签的内容；如果option上有value属性，就提交value属性的值。

<select name="city"><!-- 下拉选框 -->
    <option value="bj">北京</option><!-- 选项 -->
    <option value="sh">上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

五、注册表单练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 在style标签内部可以书写CSS样式或注释 -->
    <style type="text/css">
       /* css注释内容 */
       table{
           /* 为当前元素设置边框(边框宽度、样式、颜色) */
           border:2px solid red;
           /* 设置表格边框和单元格边框合并 */
           border-collapse: collapse;
           /* 为表格设置背景颜色 */
           background: lightgrey;
           /* width: 70%; */
           /* 设置边框左右外边距自适应,即左右外边距保持相等 */
           margin-left:auto;
           margin-right:auto;
       }
       td,th{
           border:2px solid red;
           /* 设置边框和内容的距离(内边距) */
           padding: 5px;
       }
       h1{
           /* 设置元素内容水平居中 */
           text-align: center;
       }
       
    </style>
</head>
<body>
<h1>欢迎注册</h1>
<form action="#">
    <table>
       <tr>
           <td>用户名:</td>
           <td><!--  用户名 -->
              <input type="text"  name="username" placeholder="请输入用户名..."/>
           </td>
       </tr>
       <tr>
           <td>密码:</td>
           <td><!--  密码 -->
              <input type="password" name="pwd" placeholder="请输入密码..."/>
           </td>
       </tr>
       <tr>
           <td>性别:</td>
           <td><!-- 性别 -->
              <input type="radio" name="gender" value="male"/>男
              <input type="radio" name="gender" value="female"
                  checked="checked"/>女
           </td>
       </tr>
       <tr>
           <td>爱好:</td>
           <td><!-- 爱好 -->
              <input type="checkbox" name="like" value="basketball"/>篮球
              <input type="checkbox" name="like" value="football"
                  checked="checked"/>足球
              <input type="checkbox" name="like" value="velloyball"/>排球
           </td>
       </tr>
       <tr>
           <td>城市:</td>
           <td><!-- 城市 -->
              <select name="city"><!-- 下拉选框 -->
                  <option value="bj">北京</option><!-- 选项 -->
                  <option value="sj">上海</option>
                  <option selected="selected">广州</option>
                  <option>深圳</option>
              </select>
           </td>
       </tr>
       <tr>
           <td>自我描述:</td>
           <td>
              <textarea name="desc" cols="30" rows="5" 
                  placeholder="请输入描述信息..."></textarea>
           </td>
       </tr>
       <tr>
           <!-- 
              colspan设置单元格横跨的列数
              rowspan设置单元格竖跨的行数
            -->
           <td colspan="2" style="text-align:center;">
              <!-- value用于设置按钮上显示的文本 -->
              <input type="submit" value="提交"/>
           </td>
       </tr>
    </table>
    
</form>
 
</body>
</html>

XCXCode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML表单

一、向服务器提交数据的两种方式：1.通过表单向服务器提交数据例如，在注册时或者登录时，用户名密码所在的就是一个表单，在表单中可以填写数据，填写完后通过提交表单可以向服务器提交数据。2.通过超链接向服务器提交数据可以在超链接后面通过问号拼接参数。问号后面都是参数，参数分为参数名（比如user和age）和参数值（zhangsan和18），多个参数中间用&分隔。当我们点击超链接...
复制链接

扫一扫