当用户熟悉了静态网页制作后就能感受到它的功能单一,会想建立具有交互性的动态网站。动态网站经常用到的一个元素就是表单。表单是HTML的一个重要组成部分,是网站管理员与用户之间沟通的桥梁。
表单标签--from
是一个双标签。标签中包含的数据有表单控件及必须的伴随数据,如控件标签、处理数据的脚本等。主要有表单名称、数据处理、数据传输方式等5个基本属性,其中表单的程序处理和数据传输方式是必不可少的。
程序处理属性--action
表单本身是没有用途的,用户填入表单的信息需要程序来进行处理,表单里的'action'就定义了表单所要提交到的目的文件,该目的文件收到信息后,通常和一个程序连接实现数据的处理。
属性值可以是一个程序,也可以是一个脚本的URL地址
<formaction='表单的处理程序'>
</form>
##表单名称属性--name
用来给表单命名。建议每一表单设定一个功能相符的名称,防止信息提交到后台程序处理时出乱。
<formname='表单的名称'>
</form>
##数据传输方式--method
定义了表单数据发送的方式,数据发送到'action'属性所规定的页面,主要针对服务端进行处理。可作为URL变量(method='get')或者HTTPpost(method='post')的方式来发送。
<formmethod='数据传输方式'>
</form>
#输入类控件
表单元素也称表单控件,按照填写方式分为输入类和下拉菜单类。用<input>标签定义。
<form>
<inputname='控件名称'type='控件类型'>
</form>
文本框--text
最常见的文字输入区域,在登陆区,讨论区等。在页面中以单行文本框形式显示
<inputtype="text"name="控件名称"size="文本框长度"maxlength="最大字符数"value="文本框默认值">
如果希望文本框只读,可以使用'readonly'设置
<inputtype="text"name="控件名称"size="文本框长度"maxlength="最大字符数"value="文本框默认值"readonly>
密码框--password
隐藏输入框内容,输入的字符会用'*'代替
<inputtype="password"name="控件名称"size="文本框长度"maxlength="最大字符数"value="文本框默认值">
单选框--radio
当出现多个选项而且只能选择一个时,会用到单选框。向指定某个选项默认状态下处于选中状态时,用'checked'属性定义。只能有一个单选框设置。要想传送到处理程序中,需要设置value属性。
<inputtype="radio"value="单选框取值"name="单选框名称"checked>
复选框--checkbox
是可以选多个选项的选项框,也可默认多个选项都处于选中状态。
<inputtype="checkbox"value="单选框取值"name="单选框名称"checked>
文本域--textarea
主要用于输入多行文本,常见于留言、评论区。'rows'文本域行数,'cols'文本域列数.
<textareaname="文本域名称"rows="文本域的行数"cols="文本域的列数">
</textarea>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<h1>用户注册页面</h1>
<span>用户名:</span><inputtype="text"name="username"><br>
密 码:<inputtype="password"name="pwd"><br>
<span>确认密码:</span><inputtype="password"name="con_pwd"><br>
<br>
<span>你的年龄是:</span>
<inputtype="radio"name="age"checked>18岁以下
<inputtype="radio"name="age">19-35岁
<inputtype="radio"name="age">35岁以上
<br>
<span>你的个人爱好:</span>
<inputtype="checkbox"name="habbit">阅读
<inputtype="checkbox"name="habbit">写作
<inputtype="checkbox"name="habbit">运动
<inputtype="checkbox"name="habbit">游戏
<inputtype="checkbox"name="habbit">其他
<br>
<span>自我介绍</span>
<br>
<textarearows="3"cols="60"></textarea>
</form>
</body>
</html>


本文转载自中文网


本文转载自中文网
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h54540.shtml