表单的基本属性

HTML表单搜集不同类型的用户输入,将用户输入和动作请求传给服务器,服务器根据不同数据和请求进行不同处理,保存处理结果并向浏览器返回响应。
<form>元素定义表单,不再浏览器中显示。表单按填写方式分为输入类控件和列表类控件。输入类控件由<input>标记;列表类由<select>标记。
form常用属性如下

属性 作用
action 提交表单时向何处发送数据
name 提交表单的名称
method 发送数据的方法(get;post)
<body>
    <form name="example" action="index.html"  method="get">
    <input name="button" type="button" value="普通"/>
    </form>
</body>


<input>元素

input部分属性作用如下

属性 作用
name 识别表单元素
size 规定输入字段宽度
maxlength 规定输入字段最大长度
value 输入的设定值
type 定义表单形态

表单有许多形态,由type属性枚举值定义。对于不同的输入类型,value属性用法不同

type枚举值 形态 value属性
text 文本字段 输入字段初始值
password 密码域 输入字段初始值
radio 单选按钮 输入设定值(选项值)
checkbox 复选框 输入设定值(选项值)
button 普通按钮 按钮显示文本
submit 提交按钮 按钮显示文本
reset 重置按钮 按钮显示文本
hidden 隐藏域 输入字段初始值
file 文件域 不适用value属性

文本框

<body>
    学号<input type="text" name="ID" value="" size="15" maxlength="10"/>
</body>

密码域

<body>
    密码<input type="password" name="PWD" value="" size="15" maxlength="10"/>
</body>

单选

<body>
    驾照:<input type="radio" name="class" value="hard"/>难<input type="radio" name="class" value="easy"/>易
</body>

多选

<body>
    <p>你喜欢的男生特征:</p>
    <br/>
    <input type="checkbox" name="test1" value="height" />180cm
    <input type="checkbox" name="test2" value="GPA" />3.8
    <input type="checkbox" name="test3" value="times" />7
    <input type="checkbox" name="test4" value="length" />15cm
</body>

按钮

一个表单仅能有一个提交按钮,用于触发表单动作;重置按钮用于清楚表单中所有数据;普通按钮须用脚本方法设置onclick属性值。使用普通按钮onclick属性需要用到JavaScript。

隐藏域

隐藏域用来传递一些不在页面中显示的参数,当表单提交时,隐藏域内容会一起提交给处理程序。例如网页的id等信息。

文件域

文件域用来选择上传所需的文件

<body>
    <p>请上传文件:<input type="file" name="word"></p>
</body>


列表元素

select元素可以创建单选或多选菜单,<select>中<option>标签用于定义列表中的可用选项。select标签常用属性如下

属性 作用
name 下拉列表名称
size 下拉列表可见表项数
multiple 规定可选择多个选项
<body>
    <p>爱好
        <select name="hobby" size="2" multiple="multiple">
            <option value="sing">唱</option>
            <option value="dance">跳</option>
            <option value="rap">rap</option>
            <option value="basketball">篮球</option>
        </select>
    </p>
</body>


textarea元素

文本区中可以容纳无限数量文本,cols和rows属性可以规定taexarea尺寸。

<body>
    <p>意见<br/>
    <textarea name="info" cols="30" rows="5">此区域填写意见</textarea>
    </p>
</body>


表单与服务器互动

需要用到JavaScript编写改变html行为的文件


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容