频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
表单页面设计
2017-01-25 10:24:02         来源:萌萌程序员的博客  
收藏   我要投稿

1:表单的定义

<form>表单标签

基本语法

<form action="url" method=get/post name=value target="目标窗口" enctype="编码方式">
</form>

解析:

1:action

用户填入表单的信息总是需要程序设计进行处理,表单中的action就指明了处理表单信息的文件,这个值可以是程序或脚本的一个完整URL

2:method

用来定义处理程序从表单获得信息的方式,get----来访者输入的数据会附加在URL之后

post---表单数据与URL是分开发的

3:enctype

用于设置表单信息提交的编码方式

表单编码方式的取值

text/plain ------- 以纯文本的形式传送

application --- 默认的编码形式

multipart/form-data --- MIME编码,上传文件的表单必须选择该项

====================

2:表单元素

1=添加表单控件

基本语法:

<form>
<input name="控件名称" type="控件类型">
</form>

input表单类别

type="submit" 将表单内容提交给服务器的按钮

type="reset" 将表单内容全部清除,重新填写的按钮

type="image" 图像提交按钮

type="hidden" 隐藏域,隐藏域不显示在页面上,但会将内容传递到服务器中

type="file" 文件域

基本语法

<input 属性1 属性2....>

input标签的常用属性

type 控件的类型

name 控件的名称

align 对齐方式

size 控件的宽度

maxlength 允许输入的最大字符数

value 用于指定输入默认值

代码如下

<form>
    <input type="text" size="20">
    </form>

3:文件域

(input type="file")

代码如下

<form name="form" method="post" action="https://www.baidu.com">
       请上传你的照片到我的邮箱:
       <input type="file" name="userpic">
        <input type="submit" value="发送">
   </form>

4:====================

菜单列表类表单控件

基本语法

<select name="name" size="value" multipe>
<option value="value" selected>选项1</option>
<option value="value" >选项2</option>
<option value="value" >选项3</option>
</select>

解析

size --- 显示选项的数目,当size为1时为下拉列表框的控件

multiple ----列表中的项目多选,用户用Ctrl键来实现多选

value ----选项值

selected === 默认选项

代码如下

<form>
    请选择您的工作性质:<br>
    <select name="selected" id="selected">
        <option value="value" selected>选项1</option>
        <option value="value" >选项2</option>
        <option value="value" >选项3</option>
        </select>
    <br>
   <input type="submit" name="button" id="button" value="提交">
    </form>

5=======

文本域标签

基本语法

<textarea name="field_name" value="filed_value" rows=value cols=value></textarea>

代码如下

<form>
    <h2>用户调查</h2>
    请留言<br>
    <textarea name="textfiled" cols="50" rows="20" id="textfild"></textarea><br>
    <input type="submit" name="button" value="提交">
    </form>
点击复制链接 与好友分享!回本站首页
上一篇:JSP页面动态生成表格并为表格添加事件
下一篇:CSS_文本样式
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站