表单

来源：互联网发布：震曰故人知君翻译编辑：程序博客网时间：2024/05/29 13:51

表单：
<form action="url" method="get/post" id="IDname" style="style information" name="forname" target="_blank"/>
target:_blank 新窗口
_parent 父窗口
_self 原窗口
_top 最外层窗口
method:get 传送的数据会被附加在URL之后，被显示在浏览器的地址栏中，而且被传送的数据通常不超过256个，对数据保密性差，不安全
http://www.baidu.com/s?传送的数据（传送数据跟在url后）
post提交数据是采用它数据量没有限制，但是速度慢

（1）单行文本框：
<input type="text" name="filedname" id="IDname" class="class name" size="filed size" value="default value" maxlength="maximum filed size"/>
class:文本框指定类名
id:文本框指定标示符
name:为文本框指定一个名字
size:文本框输入区大小
maxlength:输入内容最大长度

（2）多行文本框:
<textarea class="classname" id="IDname" colos="numbers" rows="number" style="style information" readonly>在文本区中显示内容</textarea>
rows:设置文本输入窗口的高度，单位是字符行
colos:设置文本输入框口的宽度，单位是字符个数
readonly:只读，不能修改和编辑

（3）密码框:
<input type="password" name="filed name" value="default value" size="filed size"/>

（4）单选按钮:
<input type="radio" name="radio name" value="given value" checked/>
name值相同表示单选按钮组
checked:单选按钮初始状态

（5）复选框:
<input type="checkbox" name="checkbox name" value="given value" checked/>

（6）文件域:
<input type="file"/>

（7）提交按钮:
<input type="submit"/>

（8）重置按钮:
<input type="reset"/>

（9）普通按钮:
<input type="button" value="确定"/>
<button>取消<button/>

（10）下拉菜单:
<select>
<option value="string" selected disabled>列表项信息</option>
</select>
disabled:可使一个选项不可用

（11）下拉列表:
<select multiple>
<option value=" " selected> </option>
</select>

（12）对选项进行分类：
<optgroup label="组名">

(13)使用图像提交表单：

eg1:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>登录面</title></head><body><form action="index.html"> <!--表单：提交目标地址-->    <p>        <label for="username">用户名：</label>        <input type="text" id="username"/> <!--text:单行文本框-->    </p>    <p>        密码：<input type="password"/>    </p>    <p>        再次输入密码：<input type="password"/>    </p>    <p>        性别：<input type="radio" name="sex" checked />女              <input type="radio" name="sex" />男  <!--单选按钮组-->    </p>    <p>        爱好： <input type="checkbox"/>音乐<br>        　　      &nbsp;<input type="checkbox"/>游戏<br>        　　      &nbsp;<input type="checkbox"/>看书<br>        　　      &nbsp;<input type="checkbox"/>运动<br> <!--复选框-->    </p>    <p>地址：<select><br>               <option value="陕西" selected>陕西</option>  <!--默认选中-->               <option value="山西">山西</option>               <option value="河北">河北</option>             </select>省             <select multiple><br>                <option value="陕西" selected>陕西</option>  <!--默认选中-->                <option value="山西">山西</option>                <option value="河北">河北</option>             </select>省    </p>    <p>        上传头像：        <input type="flie"/>  <!--文件域-->    </p>    <p>        留言：         <textarea name=" "  id=" " cols="100 "  row="200">         </textarea>    </p>    <p>        <input type="submit"/> <!--提交按钮-->        <input type="reset"/><!--重置按钮-->        <input type="button" value="确定"/><!--普通按钮：确定-->        <button>取消</button>    </p></form></body></html>

eg2:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表单</title></head><body><form action="" id="myform" autocomplete="on">    <p>邮箱：<input type="email" form="myform" autofocus/></p><!--autofocus:自动获取焦点，一个页面只能有一个-->    <p>网址：<input type="url" form="myform"/></p>    <p>日期：<input type="date" form="myform"/></p>    <p>时间：<input type="time" form="myform"/></p>    <p>月份：<input type="month" form="myform"/></p>    <p>星期：<input type="week" form="myform"/></p>    <p>数字：<input type="number" form="myform"/></p>    <p>滑动条：<input type="range" form="myform"/></p>    <p>搜索： <input type="search" form="myform" required/></p><!--required:必填-->    <p>颜色：<input type="color" form="myform"/></p>    <input type="text" form="myform" autocomplete="on" name="usersname" placeholder="please input name"/>    <input type="submit">    <!--autocomplete="on/off":自动完成，必须指定对象name,（off用于密码中）-->    <p><input id="name" list="myname"/>    <datalist id="myname"><!--input中的list名要和datalist中的id名一样-->        <option value="sgsg">        <option value="ssg">        <option value="gsg">    </datalist>    </p></form></body></html>

阅读全文

0 0