投稿
  1. 首页
  2. 随笔

怎样用html写表单的教程

国考论坛 • 2023-3-20 • 随笔 • 阅读 48

怎样用html写表单的教程,第1张

我们在浏览一些网站时经常会用到一种网页元素--表单。如下图，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来介绍HTML表单相关的一些知识点。

1)表单:帮助服务器收集客户端信息的一种机制

<form action="提交到的页面" method="提交的方法">

表单控件

form>

action:数据最后所提交的页面 绝对路径/相对路径

method:数据提交服务器时的提交方法 post get

2)表单控件:表单用于用户填写信息的控件

1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件

(注册时，用户名填写)

格式:

<input type="text" name=""  id=""  value="" size="" placeholder=""/>

type:设置控件样式 text

name:用于表单收集信息的一种标示符，也就是控件的名称

2、密码框:只是用户输入的内容看不到

<input type="password" name="" id=""  size=""/>

3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组

<input type='radio' name="" value="" checked>标示符

name:为了保证传递服务器数据只有一个，所以name值必须相同

value：是用提交服务器时，该标签被提交的数据,value不能相同

checked:默认按钮组中的那个按钮被选中

性别:<input type='radio' name="" value="" checked>男

<input type='radio' name="" value="" checked>女

<input type='radio' name="" value="" checked>保密

所有表单控件name值不能相同!!!

4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个[]

格式:

<input type='checkbox' name="" id="" value="" checked>标示

选课:

<input type='checkbox' name='classes[]' checked value='1'>语文

<input type='checkbox' name='classes[]'  value='2'>数学

<input type='checkbox' name='classes[]'  value='3'>历史

<input type='checkbox' name='classes[]'  value='4'>政治

<input type='checkbox' name='classes[]'  value='5'>物理

<input type='checkbox' name='classes[]'  value='6'>化学

<input type='checkbox' name='classes[]' checked value='7'>美术

注意：一定要在name属性后面添加[]

5)下拉列表框:

格式:

<select name="" >

<option value="" selected>下拉列表项option>

<option value="" >下拉列表项option>

<option value="" >下拉列表项option>

<option value="" >下拉列表项option>

<option value="" >下拉列表项option>

select>

multiple:允许用户选中多个下拉列表项

optgroup: 设置下拉分类标示

6) 文本域：可以输入多行数据的表单控件

<textarea name="" id="" cols="" rows="">

内容

textarea>

rows:设置文本域可以输入的行数

cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)

个人介绍:

<textarea name='descs' cols="50" rows="10">

我是个学生

textarea>

7)隐藏域：

<input type="hidden" name = “”value =””>

8)上传控件：

<input type="file" name=””>

9)按钮标签:

普通按钮:为js提供的控件

<input type='button' name=”” value=""/>

value：按钮中显示的数据和提交到服务器后该控件提交的值

<input type='button' name='clicks' value="点我"/>

提交按钮:点击后可以提交表单

<input type='submit' name="add" value='注册'/>

重置按钮:点击后可以将用户输入的数据清空

<input type='reset' name='cancel' value='重置'>

图片提交按钮:使用图片作为提交按钮

<input type='image' src='图片地址' name=””>

本文的分享就到这，希望我的回答能帮到你。

这个是样例，不知道是不是你要的；

<!--html 代码-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html charset=GBK">

<title>模拟excel表格</title>

<style type="text/css">

<!--

.form th {

background-color: #efebde

border-right-width: 1px

border-bottom-width: 1px

border-right-style: solid

border-bottom-style: solid

border-right-color: #7e7d68

border-bottom-color: #7e7d68

font-weight: normal

padding-top: 5px

cursor:url(Cursors/SizeE.cur)

}

.form td {

border-right-width: 1px

border-bottom-width: 1px

border-top-style: none

border-right-style: solid

border-bottom-style: solid

border-left-style: none

border-right-color: #c0c0c0

border-bottom-color: #c0c0c0

cursor:url(Cursors/ColouredAero_ew.cur)

}

.cell {

cursor:url(Cursors/ColouredAero_prec.cur)

}

.form table {

border: 1px solid #7e7d68

}

.form input {

border-top-width: 0px

border-right-width: 0px

border-bottom-width: 0px

border-left-width: 0px

border-top-style: none

border-right-style: none

border-bottom-style: none

border-left-style: none

background-color: transparent

}

-->

</style>

</head>

<body>

<form action="" method="post" name="form1" class="form" id="form1">

  <table width="80%" border="0" cellpadding="0" cellspacing="0">

  <tbody><tr>

    <th width="10%" height="10%" scope="col">&nbsp</th>

    <th width="10%" scope="col">A</th>

    <th width="10%" scope="col">B</th>

    <th width="10%" scope="col">C</th>

    <th width="10%" scope="col">D</th>

    <th width="10%" scope="col">E</th>

    <th width="10%" scope="col">F</th>

    <th width="10%" scope="col">G</th>

    <th width="10%" scope="col">H</th>

    <th width="10%" scope="col">I</th>

    <th width="10%" scope="col">J</th>

  </tr>

  <tr>

    <th height="10%" scope="row">1</th>

    <td><input name="textfield112" type="text" class="cell" size="10"></td>

    <td><input name="textfield11" type="text" class="cell" size="10"></td>

    <td><input name="textfield52" type="text" class="cell" size="10"></td>

    <td><input name="textfield54" type="text" class="cell" size="10"></td>

    <td><input name="textfield56" type="text" class="cell" size="10"></td>

    <td><input name="textfield61" type="text" class="cell" size="10"></td>

    <td><input name="textfield69" type="text" class="cell" size="10"></td>

    <td><input name="textfield77" type="text" class="cell" size="10"></td>

    <td><input name="textfield85" type="text" class="cell" size="10"></td>

    <td><input name="textfield93" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">2</th>

    <td><input name="textfield2" type="text" class="cell" size="10"></td>

    <td><input name="textfield12" type="text" class="cell" size="10"></td>

    <td><input name="textfield53" type="text" class="cell" size="10"></td>

    <td><input name="textfield55" type="text" class="cell" size="10"></td>

    <td><input name="textfield57" type="text" class="cell" size="10"></td>

    <td><input name="textfield62" type="text" class="cell" size="10"></td>

    <td><input name="textfield70" type="text" class="cell" size="10"></td>

    <td><input name="textfield78" type="text" class="cell" size="10"></td>

    <td><input name="textfield86" type="text" class="cell" size="10"></td>

    <td><input name="textfield94" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">3</th>

    <td><input name="textfield3" type="text" class="cell" size="10"></td>

    <td><input name="textfield13" type="text" class="cell" size="10"></td>

    <td><input name="textfield28" type="text" class="cell" size="10"></td>

    <td><input name="textfield29" type="text" class="cell" size="10"></td>

    <td><input name="textfield58" type="text" class="cell" size="10"></td>

    <td><input name="textfield63" type="text" class="cell" size="10"></td>

    <td><input name="textfield71" type="text" class="cell" size="10"></td>

    <td><input name="textfield79" type="text" class="cell" size="10"></td>

    <td><input name="textfield87" type="text" class="cell" size="10"></td>

    <td><input name="textfield95" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">4</th>

    <td><input name="textfield4" type="text" class="cell" size="10"></td>

    <td><input name="textfield14" type="text" class="cell" size="10"></td>

    <td><input name="textfield27" type="text" class="cell" size="10"></td>

    <td><input name="textfield30" type="text" class="cell" size="10"></td>

    <td><input name="textfield59" type="text" class="cell" size="10"></td>

    <td><input name="textfield64" type="text" class="cell" size="10"></td>

    <td><input name="textfield72" type="text" class="cell" size="10"></td>

    <td><input name="textfield80" type="text" class="cell" size="10"></td>

    <td><input name="textfield88" type="text" class="cell" size="10"></td>

    <td><input name="textfield96" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">5</th>

    <td><input name="textfield5" type="text" class="cell" size="10"></td>

    <td><input name="textfield15" type="text" class="cell" size="10"></td>

    <td><input name="textfield26" type="text" class="cell" size="10"></td>

    <td><input name="textfield31" type="text" class="cell" size="10"></td>

    <td><input name="textfield60" type="text" class="cell" size="10"></td>

    <td><input name="textfield65" type="text" class="cell" size="10"></td>

    <td><input name="textfield73" type="text" class="cell" size="10"></td>

    <td><input name="textfield81" type="text" class="cell" size="10"></td>

    <td><input name="textfield89" type="text" class="cell" size="10"></td>

    <td><input name="textfield97" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">6</th>

    <td><input name="textfield6" type="text" class="cell" size="10"></td>

    <td><input name="textfield16" type="text" class="cell" size="10"></td>

    <td><input name="textfield25" type="text" class="cell" size="10"></td>

    <td><input name="textfield32" type="text" class="cell" size="10"></td>

    <td><input name="textfield51" type="text" class="cell" size="10"></td>

    <td><input name="textfield66" type="text" class="cell" size="10"></td>

    <td><input name="textfield74" type="text" class="cell" size="10"></td>

    <td><input name="textfield82" type="text" class="cell" size="10"></td>

    <td><input name="textfield90" type="text" class="cell" size="10"></td>

    <td><input name="textfield98" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">7</th>

    <td><input name="textfield7" type="text" class="cell" size="10"></td>

    <td><input name="textfield17" type="text" class="cell" size="10"></td>

    <td><input name="textfield24" type="text" class="cell" size="10"></td>

    <td><input name="textfield33" type="text" class="cell" size="10"></td>

    <td><input name="textfield50" type="text" class="cell" size="10"></td>

    <td><input name="textfield67" type="text" class="cell" size="10"></td>

    <td><input name="textfield75" type="text" class="cell" size="10"></td>

    <td><input name="textfield83" type="text" class="cell" size="10"></td>

    <td><input name="textfield91" type="text" class="cell" size="10"></td>

    <td><input name="textfield99" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">8</th>

    <td><input name="textfield8" type="text" class="cell" size="10"></td>

    <td><input name="textfield18" type="text" class="cell" size="10"></td>

    <td><input name="textfield23" type="text" class="cell" size="10"></td>

    <td><input name="textfield34" type="text" class="cell" size="10"></td>

    <td><input name="textfield49" type="text" class="cell" size="10"></td>

    <td><input name="textfield68" type="text" class="cell" size="10"></td>

    <td><input name="textfield76" type="text" class="cell" size="10"></td>

    <td><input name="textfield84" type="text" class="cell" size="10"></td>

    <td><input name="textfield92" type="text" class="cell" size="10"></td>

    <td><input name="textfield100" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">9</th>

    <td><input name="textfield9" type="text" class="cell" size="10"></td>

    <td><input name="textfield19" type="text" class="cell" size="10"></td>

    <td><input name="textfield22" type="text" class="cell" size="10"></td>

    <td><input name="textfield35" type="text" class="cell" size="10"></td>

    <td><input name="textfield48" type="text" class="cell" size="10"></td>

    <td><input name="textfield47" type="text" class="cell" size="10"></td>

    <td><input name="textfield46" type="text" class="cell" size="10"></td>

    <td><input name="textfield45" type="text" class="cell" size="10"></td>

    <td><input name="textfield44" type="text" class="cell" size="10"></td>

    <td><input name="textfield43" type="text" class="cell" size="10"></td>

  </tr>

  <tr>

    <th height="10%" scope="row">10</th>

    <td><input name="textfield10" type="text" class="cell" size="10"></td>

    <td><input name="textfield20" type="text" class="cell" size="10"></td>

    <td><input name="textfield21" type="text" class="cell" size="10"></td>

    <td><input name="textfield36" type="text" class="cell" size="10"></td>

    <td><input name="textfield37" type="text" class="cell" size="10"></td>

    <td><input name="textfield38" type="text" class="cell" size="10"></td>

    <td><input name="textfield39" type="text" class="cell" size="10"></td>

    <td><input name="textfield40" type="text" class="cell" size="10"></td>

    <td><input name="textfield41" type="text" class="cell" size="10"></td>

    <td><input name="textfield42" type="text" class="cell" size="10"></td>

  </tr>

</tbody></table>

  <input type="submit" name="Submit" value="提交">

  <input type="reset" name="Submit2" value="重置">

</form>

</body></html>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://www.outofmemory.cn/zaji/6309672.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
国考论坛 国考论坛 一级用户组
0 0
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表（0条）

保存