[关闭]
@wangyupu 2020-05-21T06:07:27.000000Z 字数 5152 阅读 21

HTML5+CSS第三章笔记主讲表单和验证

HTML5+CSS

表单语法

  1.    <form  method="post" action="result.html">
  2.    <p>  名字：<input name="name" type="text" >  </p>
  3.    <p>  密码：<input name="pass" type="password" >  </p>
  4.    <p>
  5.       <input type="submit" name="Button" value="提交"/>
  6.       <input type="reset" name="Reset" value="重填“/> 
  7.    </p>
  8.     method="post"文本传输方式
  10.    示例：
  11.             用户名：
  12.             <input type="text"  name="wd" value="小苹果" maxlength="8" size="50"/>
  13.             密码：
  14.             <input type="password" name="pwd" maxlength="6" value="123" size="50"/>
  15. </form>

表单元素格式

  1. <input  type="text"  name="fname" value="text"/>
  2. “text”=input元素类型
  3. "fname"=input元素名称
  4. value="text"=input元素的值
  5.     <!--input 输入框
  6.                 type 类型
  7.                     *text:文本   默认
  8.                     *password:密码
  9.                     *radio: 单选按钮   切记 name值一样
  10.                     *checkbox:复选框 或多选框
  11.                     *submit:提交按钮   点击会触发action中的路径   必须写在form当中，否则不起作用
  12.                     reset:重置按钮   必须写在form当中，否则不起作用
  13.                     button:普通按钮
  14.                     image:图片按钮  src图片路径
  15.                     *file:文件框  必须要在form中添加属性 enctype="multipart/form-data"
  16.                     email:邮箱    表单中自带验证
  17.                     url:网址     表单中自带验证
  18.                     number:选择数字框  
  19.                     range:滑块
  20.                     search:搜索框   
  21.                     (*)tel:手机号框   在手机端可以用  控制用户只能输入数字
  22.                 *value: 目前只做默认值
  23.                 *maxlength: 文本框允许输入的做大字符数
  24.                 *name属性在表单当中的作用   wd=苹果
  26.                 *下拉框select ->option  
  27.                 selected 默认选中
  30.                 *button 标签  普通按钮
  32.                 *textarea 多行文本域   cols宽    rows高
  33.             -->

文本框

  1. <input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />
  2. "text"=文本框
  3. "userName"=文本框名称
  4. value="用户名"=文本框内默认值
  5. size="30"=文本框长度
  6. maxlength="20"=文本框可输入最多字符
  7. <input  type="password "  name="pass"  size="20" />

密码框

  1. <input  type="password "  name="pass"  size="20" />
  2. "password "代表输入一个密码框
  3. name="pass"代表密码框的名称
  4. size="20"代表密码框的长度

单选按钮

  1. <input name="gen" type="radio" value="男"  checked  />男
  2. <input name="gen" type="radio" value="女" />女
  3. type="radio"代表单选按钮框且两个`type`值必需一致
  4. checked 代表只能默认选中
  5. 示例：
  6.             性别：
  7.             <input type="radio" name="sex" value="男" />男
  8.             <input type="radio" name="sex" value="女" />女
  9.             <input type="radio" name="sex" checked value="保密" />保密

复选框

  1. <input type="checkbox" name="interest" value="sports"/>运动
  2. <input type="checkbox" name="interest" value="talk" checked />聊天
  3. <input type="checkbox" name="interest" value="play"/>玩游戏
  4. type="checkbox"代表复选框元素
  5. value="sports"代表当前元素的值
  6. 示例：
  7. 掌握技术：
  8.             <input type="checkbox" name="jishu" value="1"  checked  />JAVA
  9.             <input type="checkbox" name="jishu" value="2" checked/>HTML
  10.             <input type="checkbox" name="jishu" value="3"/>CSS
  11.             <input type="checkbox" name="jishu" value="4"/>JAVASCRIPT

列表框

  1. <select name="列表名称" size="行数">
  2. <option value="选项的值" selected="selected">…</option >
  3. <option value="选项的值">…</option >
  4. </select>
  5. select代表列表框
  6. selected="selected"代表默认选中的项
  7. option代表选项值就是里边填入的数字
  8. 选择地址：
  9.             <select name="pr" >
  10.                 <option selected>请选择省</option>
  11.                 <option value="湖北省" >湖北省</option>
  12.                 <option value="河南省" >河南省</option>
  13.                 <option value="河北省" >河北省</option>
  14.             </select>
  15.             <select name="pr" >
  16.                 <option selected>请选择市</option>
  17.                 <option value="湖北省">湖北省</option>
  18.                 <option value="河南省" >河南省</option>
  19.                 <option value="河北省" >河北省</option>
  20.             </select>
  21.             <select name="pr" >
  22.                 <option selected>请选择区/县</option>
  23.                 <option value="湖北省">湖北省</option>
  24.                 <option value="河南省" >河南省</option>
  25.                 <option value="河北省" >河北省</option>
  26.             </select>

按钮

图片按钮

  1. <input  type="reset" name="butReset" value="reset按钮">
  2. <input  type="image" src="images/login.gif" />
  3. <input  type="button" name="butButton" value="button按钮"/>
  4. type="reset"代表重置按钮
  5. value="reset按钮"代表按钮上显示的文字
  6. src="images/login.gif"代表图片路径
  7.  type="image"代表提交按钮
  8.  示例：
  9.             <input type="submit" value="注册" />
  10.             <input type="reset" value="清空"/>
  11.             <input type="button" value="普通按钮"/>
  12.             <button>but按钮</button>

多行文本域

  1. <textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >
  2. textarea：多行文本域 
  3. cols="x"：显示的列数
  4. rows="y"：显示的行数
  5. 示例可用于网页后端做备注：
  6.             <textarea name="res" cols="40" rows="10"></textarea>

文件域

  1. <form action="" method="post" enctype="multipart/form-data">
  2.   <p><input type="file" name="files" />
  3.   <input type="submit" name="upload" value="上传" /></p>
  4. </form>
  5.  type="file"：文件域
  6. enctype="multipart/form-data"：表单编码属性

邮箱

  1. <p>邮箱:<input type="email"  name="email"/></p>
  2. <input type="submit"/>
  3. type="email"：邮箱
  4. 示例：
  5. <input type="email" />

网址

  1. <p>请输入你的网址:<input type="url"  name="userUrl"/></p>
  2. <input type="submit"/>
  3. type="url"网址
  4. 示例：
  5. <input type="url" />

数字

  1. <p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
  2. <input type="submit"/>
  3. type="number"数字
  4. min="0"允许的最小值
  5. max="100"允许的最大值
  6. step="10"合法的数字间隔
  7. 示例：
  8. 年龄：
  9.             <input type="number" value="18" step="2"  min="18"  max="30" />

滑块

  1. <p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
  2. <input type="submit"/>
  3. type="range"滑块
  4. min="0"允许的最小值
  5. max="10"允许的最大值
  6. step="2"合法的数字间隔
  7. 示例：
  8. 账户余额：
  9.             <input type="range" value="50" step="2"  min="0"  max="100" />

搜索框

  1. <p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
  2. <input type="submit"/>
  3. type="search"搜索框
  4. 示例
  5. <input type="search" />

隐藏域

  1. <input type="hidden" value="666" name="userid">
  2. type="hidden"隐藏域

只读和禁用

  1. <input name="name" type="text" value="张三"  readonly>
  2. <input type="submit "  disabled   value="保存" >
  3. readonly只读文本框
  4. disabled禁用

增强鼠标的可用性

  1. 增强鼠标的可用性
  2. 自动将焦点转移到与该标注相关的表单元素上
  4. <label for="id">标注的文本</label>
  5. <input type="radio" name="gender" id="male"/>
  6. for="id"表单元素的id
  7. id="male"表单元素id

placeholder描述文本框期待用户输入何种内容

  1. input类型的文本框提供一种提示（hint）
  2. 可以描述文本框期待用户输入何种内容
  3. 提示语默认显示，当文本框中输入内容时提示语消失
  4. 适合于input标签：text、search、url、email和password等类型
  5. <input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
  6. placeholder文本框输入内容提示

required填写内容不能为空

  1. 规定文本框填写内容不能为空，否则不允许用户提交表单
  2. 适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
  3. <input type="text" name="username"  required/>
  4. required表示此项为必填项

pattern输入的内容必须符合正则表达式

  1. 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
  2. <input type="text" name="tel"  required pattern="^1[358]\d{9}" />
  3. pattern="^1[358]\d{9}"验证规则，正则表达式

手机号码

  1.             <input type="tel" />
  2.             <input type="image" src="img/renren.gif" />
  3.             <!--如果在手机上  提示是否拨打电话-->
  4.             <a href="tel:15729099315">立即拨打电话</a>：

布局以及文字对齐初级

  1. <!--align  水平移动   left左  center居中  right右  -->
  2.                 <!--valign 垂直移动   bottom下 top上  middle剧中-->
  4.         <!--
  5.             表格布局
  6.             DIV布局
  7.             <div></div>  块级元素  容器
  8.             DIV+CSS 布局
  9.         -->
  10.         <br/>
  12.     </body>
  13. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注