宝幺儿

导航

form 表单

Form表单
祖先级元素form 属性action 是表示提交地址
Method表示提交方式(显式,隐式)
Get用户输入的信息会显示在提交地址中,post提交地址中不会显示用户输入的内容。

<form action=”#” method=”get/post”>
子元素:
用户名:<input type=”text” placeholder=”请输入” name=”username”>
密码:<input type=”password” placeholder=”只输入数字和字母” name=”pwd”>
手机号:<input type=”text” name=”mobile” maxlength=”11” pattern=””>
性别:男<input type=”radio” name=”gender” value=”male”>
           女<input type=”radio” name=”gender” value=”female”>
input输入框
type选取输入框的类型
name当前输入框内容的名称
placeholder提示信息
maxlength最大长度扩展:键值对pattern正则表达式(判断用户输入的内容是否符合规则)

单选框操作步骤:
Step1:type=“radio”
Step2:name的值要相同
由于单选框是用户选择的,而不是用户输入的,
因此,要把相应的值也添加进来,以便进行提交,value表示值。

多选框操作步骤(复选框):
Step1:type=“checkbox”
Step2:name的值要相同
由于多选框是用户选择的,而不是用户输入的,
因此,也相应的值进行提交。

某一个值想要默认被选中,在input标签中添加checked。

爱好:
吃饭:<label for=”chifan”>吃饭</label>
            <input type=”checkbox” name=”hobby” value=”eat” id=”chifan”>
Label标签与input标签相关联,label中的for值与input的id值相同。
实现功能:页面中点击了label元素内容,可以自动激活或选中相关联的input标签。
敲代码:<input type=”checkbox” name=”hobby” value=”code” required>
Required表示此项为必填项,不填会有提醒


下拉列表
父元素:select
子元素:option
属性value是对应元素内容的值。
<select name=”city” id=”city”>
   <option value=”CD”>成都市</option>
<option value=”ZG”>自贡市</option>
<option value=”DZ”>达州市</option>
</select>
提交按钮---<input type=”submit” 可设置value=”自定义:搜全部”>
重置按钮---<input type=”reset”>
普通按钮---<input type=”button” value=”普通按钮”>
HTML5 提交按钮---<button>元素内容</button>

Can I use  网站,可以查询标签适用的一些网站。
如果设置必填项,在input中加入required属性。
Textarea多行文本框,可换行输入。

下拉列表进行分组,分组标签optgroup,显示在页面中的分组内容,需要添加到label值当中。
<select name=”city” id=”Department”>
   <optgroup label=”市场部”>
     <option value=”HW”>户外</option>
<option value=”WL”>网络</option>
   </optgroup>
<optgroup label=”教学部部”>
     <option value=”XMJL”>项目经理</option>
<option value=”BZR”>班主任</option>
   </optgroup>
</select>

身高/体重  <input type=”number” step=”5”(每次增加5) max=“30” min=”5”>
年龄  <input type=”range”>
邮箱  <input type=”mail”>
手机  <input type=”tel”>

扩展:
Pattern正则表达式(判断用户输入的内容是否符合规则)
手机(reg)<input type=”text” maxlength=”11” pattern=” 1 \ d{10}”>
出生年月日<input type=”date” value=”2003-03-05”—设置默认值>
请选择你喜欢的颜色<input type=”color”>

posted on 2019-03-24 23:08  宝幺儿  阅读(180)  评论(0编辑  收藏  举报