表单赋值_HTML入门2-表单

最新推荐文章于 2022-04-13 10:36:40 发布

电影观察君

最新推荐文章于 2022-04-13 10:36:40 发布

阅读量348

点赞数

文章标签：表单赋值

本文链接：https://blog.csdn.net/weixin_33308507/article/details/112069177

版权

这篇博客详细介绍了HTML中的表单元素，包括文本框、文本域、密码框、表单、单选框、复选框、下拉列表、按钮以及图像提交，通过实例展示了各种属性的效果，如size、value、placeholder等，并提供了练习环节供读者实践。

摘要由CSDN通过智能技术生成

一.HTML文本框与文本域

1.<input type="text">即表示文本框，不需要写成<input></input>或,<input/>这样，包含“size”“value”“placeholder(背景文字文本框)”等属性，但框里的内容只能输一行，想要多行输入，需要使用文本域。
初始示例：<input type="text">
<br/>
<br/>
属性size示例：<input type="text" size="10">
<br/>
<br/>
属性value示例：<input type="text" size="10" value="有初始值的文本框">
<br/>
<br/>
属性placeholder示例：<input type="text" size="12" placeholder="有背景文字的文本框">
<br/>
<br/>

未加属性效果：
属性size效果：
属性value效果：
属性placeholder效果：

2.<textarea>即文本域，文本域可以多行输入，而且可以有滚动条,包含cols和rows属性
未加属性示例：
<br/>
<textarea>123 456 
  789 
</textarea>
<br/>
使用属性cols(宽度)和rows（行数）示例：
<br/>
<textarea cols="20" rows="6">123456789
  1231
  1233
  1234
  1233
  1236</textarea>

未加属性效果：
123 456 789
使用属性cols (宽度) 和rows（行数）效果：
123456789 1231 1233 1234 1233 1236

二.HTML密码框

<input type="password">即表示密码框，输入的数字会自动显示为星号
运行示例：<input type="password" value="123456789">

运行效果：

三.HTML表单

<form>用于向服务器提交数据，比如账号密码，提交数据常用method="get"和method="post"两种提交方式,前一种是form默认的,提交数据会在浏览器上显示出来，不可以上传文件，后一种必须通过method="post"语句指定，提交数据不会在浏览器上显示出来，可以提交文件等二进制数据。
 <!---action="https//saliva.top/about.jsp"表示把账号和密码提交到about.jsp这个页面--->
<form action="https//saliva.top/about.jsp">
<!---name="name"、name="password"意思是给变量赋值--->
账号：<input type="text" name="name"><br/>
密码：<input type="password" name="password"><br/>
<!---input type="submit" 用来创建提交对象>
<input type="submit" value="登录">
</form>

表单效果：账号：

密码：

四.HTML单选框

<input type="radio">表示单选框,包含name、checked等属性
多选框示例：
<br/>
A<input type="radio"><br/>
B<input type="radio"><br/>
C<input type="radio"><br/>
D<input type="radio"><br/>
<br/>
单选框示例：
<!---把多个选项框放在同一个分组里，给定相同的name属性即可,此处value属性非必须，后期页面处理时用到request name 属性时，得到的值就是value--->
<br/>
A<input type="radio" name="四选一"><br/>
B<input type="radio" name="四选一"><br/>
C<input type="radio" name="四选一"><br/>
D<input type="radio" name="四选一"><br/>
默认选中示例：
<br/>
<input type="radio" checked="checked">

多选效果：
A
B
C
D
单选效果：
A
B
C
D
默认选中效果：

五.HTML复选框

<input type="checkbox">即表示复选框
<!---value同单选框一样的道理--->
吃饭<input type="checkbox" value="吃饭"><br/>
学习<input type="checkbox" value="学习" ><br/>
玩手机<input type="checkbox" value="玩手机"><br/>
睡觉<input type="checkbox" value="睡觉 value"><br/>

复选框效果：
吃饭
学习
玩手机
睡觉

六.HTML下拉列表

<select>即下拉列表，需要配合<option>使用,有siae、selected等属性
 未加属性示例：
<select>
  <option>张三</option>
  <option>李四</option>
  <option>王麻子</option>
</select >
<br/>
<br/>
size高度属性示例:
<select size="2">
  <option>张三</option>
  <option>李四</option>
  <option>王麻子</option>
</select>
<br/>
<br/>
multiple多选属性示例：
<!---使用ctrl和shift进行多选--->
<select   size="4" multiple="multiple">
  <option>张三</option>
  <option>李四</option>
  <option>王麻子</option>
</select >
<br/>
<br/>

默认选中属性示例：
<select multiple="multiple">
  <option selected="selected">张三</option>
  <option selected="selected">李四</option>
  <option>王麻子</option>
</select >

未加属性效果：张三李四王麻子
size高度属性效果: 张三李四王麻子
multiple多选属性效果：张三李四王麻子

默认选中属性效果：张三李四王麻子

七.HTML按钮

按钮分为普通按钮，提交按钮，重置按钮三种
按钮标签有两种<button></button>和type="",不同之处是前一种button里面可以是文字、图片、也可以提交数据。
<button>普通按钮</button>
<button type="submit">提交</button>
<button> <img  src="http://cdn.jsdelivr.net/gh/salivaser/bed/登录 .png"></button>定义图片
<button type="img" src="http://cdn.jsdelivr.net/gh/salivaser/bed/登录 .png"></button>
<input type="button">即普通按钮，普通按钮不能提交数据，即不能用于登录等按钮
<input type="submit">即为提交按钮，用于提交form,把数据提交至服务器
<input type="reset">即为重置按钮，可以把输入框的改动复原
<form method="post" action="https//saliva.top/about.jsp">
账号：<input type="text" name="name"><br/>
密码：<input type="password" name="password"><br/>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>

button标签示范效果：
普通按钮提交

type=""示范效果:

账号：

密码：

八.图像提交

<input type="image" src="">即使用图像作为按钮进行form的提交
<form method="post" action="https//saliva.top/about.jsp">
账号：<input type="text" name="name"><br/>
密码：<input type="password" name="password"><br/>
<input type="image" src="http://cdn.jsdelivr.net/gh/salivaser/bed/登录 .png">
</form>

账号：

密码：

九.练习

<html lang="en"> <!---语言为英文--->
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <form action="">
       <table align="center">
           <tr>
               <td align="right"><font color="F0000">*</font>用户名：</td>
               <td><input type="text"></td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>密码：</td>
               <td><input type="password"></td>
           </tr>
           <tr>
               <td><font color="F0000">*</font>确认密码：</td>
               <td><input type="password"></td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>Email：</td>
               <td><input type="text"></td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>真实姓名：</td>
               <td><input type="text"></td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>性别：</td>
               <td> 男：<input type="radio" name="性别" id="男"> 女：<input type="radio" name="性别" id="女"></td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>生日：</td>
               <td>
                   <select>
                       <option selected disabled>请选择</option>
                       <option>1997</option>
                       <option>1998</option>
                       <option>1999</option>
                       <option>2000</option>
                   </select>
                   <select>
                       <option selected disabled>请选择</option>
                       <option>1</option>
                       <option>2</option>
                       <option>3</option>
                       <option>4</option>
                   </select>
                   <select>
                       <option selected disabled>请选择</option>
                       <option>1</option>
                       <option>2</option>
                       <option>3</option>
                       <option>4</option>
                   </select>
               </td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>手机：</td>
               <td><input type="text"></td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>居住地：</td>
               <td>
                   <select>
                       <option >请选择</option>
                       <option>湖北省</option>
                       <option>广西省</option>
                       <option>四川省</option>
                   </select>
                 <select>
                       <option>请选择</option>
                       <option>武汉市</option>
                       <option>荆州市</option>
                       <option>荆门市</option>
                   </select>
                   <select>
                   <option>请选择</option>
                   <option>坭陂镇</option>
                   <option>新圩镇</option>
                   <option>三圣乡</option>
               </select>
               </td>
           </tr>
           <tr>
               <td align="right"><font color="F0000">*</font>QQ：</td>
               <td><input type="text">
           <br>
               <font size="-1" color="blue">设置我的QQ在线状态</font>
               </td>
           </tr>
         <tr>
           <td colspan="2"><input type="submit" value="注册">
 <input type="button" value="返回登录">
 <input type="reset" value="重置"
           </td>
       </tr>
</body>
</form>
</html>

效果如下：

*用户名：
*密码：
*确认密码：
*Email：
*真实姓名：
*性别：	男：女：
*生日：	请选择 1997 1998 1999 2000 请选择 1 2 3 4 请选择 1 2 3 4
*手机：
*居住地：	请选择湖北省广西省四川省请选择武汉市荆州市荆门市请选择会师镇老君镇郭城驿镇
*QQ：	设置我的QQ在线状态