表单页面设计

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>