html表格输入框

html#格#输入框 篇一:HTML表单与输入实例 HTML 表单用于搜集不同类型的用户输入。 表单标签 标签 <form <input <label 定义输入域 定义一个控制的标签 描述 定义供用户输入的表单 <textarea 定义文本域 (一个多行的输入控件) <fieldset 定义域 <legend 定义域的标题 <select 定义一个选择列表 <optgroup 定义选项组 <option 定义下拉列表中的选项 <button 定义一个按钮 <isindex 已废弃。有<input代替。 实例 文本域(Text fields) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 密码域 本例演示如何创建 HTML 的密码域。 1 (可以在本页底端找到更多实例。) 表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。 表单使用表单标签(<form)定义。 <form <input <input </form 输入 多数情况下被用到的表单标签是输入标签(<input)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下: 文本域(Text Fields) 当用户要在表单中键入字母、数字等内容时，就会用到文本域。 <form First name: <input type=text name=firstname <br Last name: 2 <input type=text name=lastname </form 浏览器显示如下: 注意，表单本身并不可见。同时，在大多数浏览器中， 文本域的缺省宽度是20个字符。 单选按钮(Radio Buttons) 当用户从若干给定的的选择中选取其一时，就会用到单选 框。 <form <input type=radio name=sex value=male Male <input type=radio name=sex value=female Female </form 浏览器显示如下: Male Female 注意，只能从中选取其一。 复选框(Checkboxes) 当用户需要从若干给定的选择中选取一个或若干选项时， 就会用到复选框。 <form <input type=checkbox name=bike I have a bike <br <input type=checkbox name=car I have a car 3 </form 浏览器显示如下: I have a bike I have a car 表单的动作属性(Action)和确认按钮 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 <form name=input action=html_form_action.asp method=get Username: <input type=text name=user <input type=submit value=Submit </form 浏览器显示如下: 假如你再上面的文本框内键入几个字母，并且点击确认按钮，那么输入数据会被传送到指向的页面。那一页将显示出输入的结果。 篇二:HTML 表单和输入 HTML 表单和输入HTML 表单用于搜集不同类型的用户输入。 表单用于搜集不同类型的用户输入。实例文本域 (Text field) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 密码域 本例演示如何创建 4 HTML 的密码域。 (可以在本页底端找到更多实例。)表 单表单是一个包含表单元素的区域。表单元素是允许用户在 表单中(比如:文本域、下拉列表、单选框、复选框等等) 输入信息的元素。表单使用表单标签(<form)定义。 <form ... input 元素 ... </form输入多数情况下被用到 的表单标签是输入标签(<input)。输入类型是由类型属 性(type)定义的。大多数 经常被用到的输入类型如下:文 本域( 文本域(Text Fields) ) 当用户要在表单中键入字 母、数字等内容时，就会用到文本域。 <form First name:<input type=text name=firstname /<br / Last name:<input type=text name=lastname /</form浏览器显示如下:First name: Last name: 注意， 表单本身并不可见。同时，在大多数浏览器中，文本域的缺 省宽度是 20 个字符。单选按钮( 单选按钮(Radio Buttons) ) 当用户从若干给定的的选择中选取其一时，就 会用到单选框。<form<input type=radio name=sex value=male /<br /Male<input type=radio name=sex value=female /</formFemale浏览器显示如下:Male Female注意，只能从中选取其一。复选框( 复选框 (Checkboxes) ) 当用户需要从若干给定的选择中选取一个或若干选项时， 就会用到复选框。<form<input type=checkbox 5 name=bike /I have a bike <br /<input type=checkbox name=car /I have a car </form浏览器显示如下:I have a bike I have a car表单的动作属性( 表单的动作属性 (Action)和确认按钮 )当用户单击确认按钮时，表单的内 容会被传送到另一个文件。表单的动作属性定义了目的文件 的文件名。 由动作属性定义的这个文件通常会对接收到的 输入数据进行相关的处理。<form name=input Username:action=html_form_action.asp method=get&l t;input type=text name=user /<input type=submit value=Submit /</form浏览器显示如下: Username:Submit假如您在上面的文本框内键入几个字母， 然后点击确认按钮，那么输入数据会传送到 html_form_action.asp 的页面。该页面将显示出输入的结 果。 HTML 表单 表单(Forms) HTML 表单(Form)是 HTML 的一个重要部分，主要用于采集和提交用户输入的信息。 举 个简单的例子，一个让用户输入姓名的 HTML 表单 (Form)。示例代码如下:<form action=/html/asdocs/html_tutorials/yourname.asp method=get 请输入你的姓名: <input type=text name=yourname <input type=submit value=提交 </form演示示例 学习 HTML 表单(Form)最关键要掌握 6 的有三个要点: ? 表单控件(Form Controls)? ?Action Method先说表单控件(Form Controls)，通过 HTML 表单的各种控件，用户可以输入文字信息， 或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= text就是一 个表单控件，表示一个单行输入框。 用户填入表单的信息总是需要程序来进行处理，表单里的 action 就指明了处理表单信息的 文件。比如上面例句里的 /html/asdocs/html_tutorials/yourname.asp。 至于 method，表示了发送表单信息的方式。method 有两个值:get 和 post。get 的方 式是将表单控件的 name/value 信息经过编码之后，通过 URL 发送(你可以在地址栏里看 到)。而 post 则将表单的内容通过 http 发送，你在地址栏看不到表单的提交信息。那什么 时候用 get，什么时候用 post 呢,一般是这样来判断的，如果只是为取得和显示数据，用 get;一旦涉及数据的保存和更新，那么建议用 post。HTML 表单 表单(Form)常用控件 常用控件(Controls) 常用控件HTML 表单(Form)常用控件有:表单控件(Form Contros) 表单控件 input type=text 单行文本输入框 将表单(Form)里的信息提交给表单里 action 所指向的文 件 复选框 单选框 下拉框 多行文本输入框input type=submitinput type=checkbox input type=radio select textArea input type=password密码输入框(输入的文字用*表示)表 7 单控件(Form Control):单行文本输入框 表单控件 :单行 文本输入框(input type=text) 单行文本输入框允许用户输入 一些简短的单行信息，比如用户姓名。例句如下:<input type=text name=yourname演示示例 表单控件(Form Control):复选框(input type=checkbox) 表单控件 :复选框 复选框允许用户在一组选项里，选择多个。示例代码: <input type=checkbox name=fruit value =apple苹果 <br <input type=checkbox name=fruit value =orange 桔子<br <input type=checkbox name=fruit value =mango芒果<br演示示例 用 checked 表示缺省已选的 选项。<input type=checkbox name=fruit value =orange checked桔子<br演示示例 表单控件(Form Control):单 选框(input type=radio) :单选框 表单控件 使用单选框，让 用户在一组选项里只能选择一个。示例代码:<input type=radio name=fruit value = Apple苹果<br <input type=radio name=fruit value = Orange桔子<br <input type=radio name=fruit value = Mango芒果<br演示示例 用 checked 表示缺省已选的选项。<input type=radio name=fruit value = Orange checked桔子<br演示示例 表 单控件(Form Control):下拉框(select) :下拉框 表单控件 下拉框(Select)既可以用做单选，也可以用做复选。单选例句 如下:<select name=fruit <option value=apple苹果 8 <option value=orange桔子 <option value=mango芒果 </select演示示例 如果要变成复选，加 muiltiple 即可。用户用 Ctrl 来实现多选。例句:<select name=fruit multiple演示示例 用户还可以用 size 属性来改变下拉框(Select)的大小。 演示示例 表单控件(Form Control):多行输入框(textarea) :多行输入框 表单控件 多行输入框(textarea)主要用于输入较长的文本信息。例句如下:<textarea name=yoursuggest cols =50 rows = 3</textarea其中 cols 表示 textarea 的宽度，rows 表示 textarea 的高度。 篇三:HTML列表、框架以及表单 上一篇文章为大家带来了HTML的介绍以及运行原理、图像表格的实际应用。本章迪派为大家介绍无序列表，有序列表，框架 浮动窗口 表单及表单控件，表单及表单控件 一、 无序列表，有序列表: 1.有序列表: <html <title俺第一个实例</title <head </head <body <Center 9 成绩表 </center <br/ <!--表格-- <table align=center bordercolor=#579AFE height=10px border=3px width=500px <tr align=center <td项目</td <td colspan=5 align=center上课</td <td colspan=2 align=center休息</td </tr <tr bgcolor=pink align=center <th星期</b</th <th星期一</th <th星期二</th <th星期三</th <th星期四</th <th星期五</th <th星期六</th <th星期日</th </tr 10 <tr align=center <td rowspan=4 align=center上午</td <td语文</td <td数学</td <td英语</td <td英语</td <td物理</td <td计算机1</td <td rowspan=4 align=center休息</td </tr 1 <tr align=center <td数学</td <td数学</td <td地理</td <td历史</td <td化学</td <td计算机2</td </tr <tr align=center <tdCAD</td <tdAI</td 11 <td淘宝</td <td图形图像</td <td网站后台</td <td学历</td </tr <tr align=center <td日文录入</td <td公建</td <td方正飞腾</td <td网页三剑客</td <td地理</td <td计算机4</td </tr <tr</tr <tr align=center <td rowspan=2下午</td <td平面</td <td装潢</td <td英语</td <td日语</td <td会计</td <tdPS</td 12 <td rowspan=2休息</td </tr <tr align=center <td数学</td <td数学</td <td地理</td 2 <td历史</td <td化学</td <td计算机6</td </tr </table </body </html <!--Html不区分大小写-- 2.无序列表 <ul <li</li </ul : 代码: <html 13 <title实例</title <head </head <body style=margin-top:0px; <ul type=circle <li英雄</li <li精武门</li <li西游记</li </ul </body </html 3 ?type可以取disc、circle、square 有序列表 代码: <html <title实例</title <head </head <body <ol type=1 start=2 <li卢俊义</li 14 <li吴用</li <li林冲</li </ol </body </html? type用于指定用什么来显示,start 表示从第 几开始计算. type有: 阿拉伯数字1, 2, 3, … 小写字母 a, b, c, … 大写字母 A, B, C, … 小写罗马字母 i, ii, iii, … 大写罗马字母 I, II, III, … 二、框架 浮动窗口 表单及表单控件: Frameset框架集 用途主要是用于分割显示多个页面 ?frameset和frame配合使用，一般讲是用于后台页面 快速入门: 4 代码 a.html页面用于保护其它页面 <frameset cols=30%,* <!--noresize不能托动框架边框-- 15 <frame name=frame1 src=b.html frameborder=0 scrolling=no noresize/ <!--frameborder设置框架边框-- <frame name=frame2 src=c.html frameborder=0/ </frameset ?该frameset页面不能有body和body体 b.html <body bgcolor=pink <!--target表示我们点击后，目标指向谁-- <a href=c.html target=frame2周杰伦</a<br/ <a href=c.html target=frame2齐秦</a<br/ <a href=c.html target=frame2周杰伦</a<br/ <a href=c.html target=frame2齐秦</a<br/ <a href=c.html target=frame2周杰伦</a<br/ <a href=c.html target=frame2齐秦</a<br/ <a href=c.html target=frame2周杰伦</a<br/ <a href=c.html target=frame2齐秦</a<br/ <a href=c.html target=frame2周杰伦</a<br/ <a href=c.html target=frame2齐秦</a<br/ <a href=c.html target=frame2周杰伦</a<br/ <a href=c.html target=frame2齐秦</a<br/ <a href=c.html target=frame2周杰伦</a<br/ <a href=c.html target=frame2齐秦</a<br/ 16 <a href=c.html target=frame2周杰伦</a<br/ 5 相关热词搜索:输入框 表格 html excel表格输入框不见了 html输入框怎么居中 html表格边框 17