HTML基础知识Day4-表单

HTML基础知识Day4-表单

1表单语法

表单的基本语法

<form method="opst/get" action="result.html">
<p><input type="text" name="用户名"/></p>
<p><input type="password" name="密码"/></p>

<input type="subimt" name="提交" value="提交"/>
<input type="reset" name="重置" value="重置"/>
</form>

注释: method="opst/get"为提交方式，如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
action="result.html"为向何处发送表单。

表单各语法的格式：
<input type="元素类型" name="元素名称" value="元素的初始值" (size="元素的宽度" maxlength="最大字符数" checked="是否选中"/)>

二 表单元素种类

1 文本框：<input type="text" name="username" value="用户名" size="文本框长度" maxlength="文本框最大字符数"/>

2 密码框：<input type="password" name="password1" value="密码"'''同上/>

3 单选按钮：
<input type="radio" name="sex" value="男"/>男

<input type="radio name="sex" value="女"/>女

4 复选框：
<input type="checkbox" name="元素名" value="元素初始值">a1
<input type="checkbox" name="相同" value="元素初始值">a2
<input type="checkbox" name="相同" value="元素初始值">a3

5 列表框：
<select name="列表名称" size="列表行数">
<option value="列表的项" selected="选中的项">列表项名</option>
<option value="...">...</option>

6 按钮：
重置按钮：<input type="reset" name="元素名" value="reset按钮">
图片按钮：<input type="img" src="路径">
定义按钮：<input type="button" name="元素名" value="button按钮">

7 多行文本域：
<textarea name="text" cols="列 rows="行">文本</textarea>

8 文本域：
<form action="#" method="post" enctype="multipart/form-data表单编码属性">
<p><input type="file" name="files" /> <input type="submit" name="upload" value="上传" /></p>

9 邮箱：
<p>邮箱:<input type="email" name="email"/></p> <input type="submit"/>

10 网址：
<p>请输入你的网址:<input type="url" name="userUrl"/></p> <input type="submit"/>

11 数字：
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p> <input type="submit"/>

12 滑块：
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p> <input type="submit"/>

13 搜索框：
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p> <input type="submit"/>