Home > Developer > Web Develop
What's new in Form 1, form new attribute 1.1, type related propertyHello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...
- Github:https://github.com/daotin/web
- Public number: The top of the Web front
- Blog Park: http://www.cnblogs.com/lvonve/
- csdn:https://blog.csdn.net/lvonve/
Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!
<!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->邮箱：<input type="email">
<!--tel并不是来验证手机号码的，因为全球手机号码格式的标准不同。它的目的是能够在移动端打开数字键盘，而数字键盘就限制了用户只能填写数字而不能填写其他字符。（在PC端无法展示）-->手机：<input type="tel">
<!--url 提供了网址的合法格式验证。必须包含 http:// 或者 https://-->手机：<input type="url">
<!--number只能输入数字和小数点，不能输入其他字符，并且输入框最右边有上下调节按钮--><!--value:默认值--><!--min:最小值--><!--max:最大值--><!--step:步伐-->数量：<input type="number" value="50" min="0" max="100" step="5">
<!--search可以在输入框输入文本后右边显示“x”，可以将输入的文本清除-->搜索：<input type="search">
<!--range范围--><!--step:步伐-->范围：<input type="range" step="5">
<!--color颜色选择器-->颜色：<input type="color">
Time-Date related
1.2. Other attributes of the form<!--时间：时分--><input type="time"><!--日期：年月日--><input type="date"><!--日期+时间：年月日时分--><input type="datetime-local"><!--年+月--><input type="month"><!--年+周--><input type="week">
<!--提示用户输入信息--><input type="text" placeholder="请输入文本" autofocus autocomplete="on" required pattern="xxx">
1. PLACEHOLDER: Hint text
2, Autofocus: Automatically get focus
3, AutoComplete: Automatic completion: On open, off off.
Prerequisite: Must be successfully submitted; The element that adds AutoComplete must have the Name property.
4, Required: Must be entered, if not entered will block form submission
5. Pattern: Regular Expression validation
<input type="file" multiple>
2. New elements in the formMultiple: You can select multiple files at once (in email, multiple allows you to fill in multiple email addresses separated by commas)
DataList elements
Function: Expand the drop-down menu, you can enter the options manually.
<input type="text" list="field"><datalist id="field"> <option value="嵌入式" label="c"></option> <option value="前端" label="web"></option> <option value="后端" label="java"></option></datalist>
3. New Form Event1, because the ability to manually enter the option, so you need to enter the box;
2. The input box is associated with the DataList by the List property;
3, value is selected after the contents of the input box, label is the auxiliary descriptive content of value.
Note: If the type is a URL address, the value must be added http://or https://to be displayed.
<body><form action=""> 用户名：<input type="text" placeholder="请输入用户名" id="user"><br> 手机号：<input type="tel" id="phone" pattern="^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$"><br> <input type="submit"> <br></form><script> document.getElementById("user").oninput = function (ev) { console.log(this.value); }; document.getElementById("phone").oninvalid = function (ev) { // 设置默认提示信息 this.setCustomValidity("请输入正确的手机号码！") };</script></body>
4. Progress barsetcustomvalidity: The default prompt message when modifying a pattern check fails.
Properties: Max Max, value: Current value
Property:
High: The range of values that are defined as higher.
Low: A range that is defined as a lower value.
Max: The maximum value of the specified range.
Min: The minimum value of the specified range.
Optimum: Specifies the optimal value for the measurement.
Value: Specifies the current value of the measure.
5, Case: summary of the form<progress max="100" value="30"></progress><br><meter max="100" min="0" high="70" low="30" value="20"></meter><meter max="100" min="0" high="70" low="30" value="50"></meter><meter max="100" min="0" high="70" low="30" value="90"></meter>
<! DOCTYPE html>Second, multimedia new content
- Audio: Audios
Property:
SRC: Audio file path for playback
CONTROLS: Display the control Panel of the audio player
AutoPlay: Auto Play
Loop: Looping Playback
<audio src="mp4/1.mp3" controls autoplay></audio>
- Video
Property:
SRC: Audio file path for playback
CONTROLS: Display the control Panel of the audio player
AutoPlay: Auto Play
Loop: Looping Playback
Weight: Width (generally only need to set width or height, you can make the video scale scale. ）
Height: High
Poster: The screen that is displayed when the video is not playing. The default is the screen of the first frame of the video.
<video src="mp4/2.mp4" controls autoplay width="500px" poster="1.jpg"></video>
- Source
Because different browsers support different video formats, we need to consider whether the browser supports the video when it is added. We can prepare video files in a variety of different formats and then use the source tag to have the browser select a supported video format to play the video.
<video controls> <source src="mp4/2.mp4" type="video/mp4"> <source src="mp4/2.flv" type="video/flv"> 浏览器不支持该格式的视频文件</video>
Browser or from top to bottom, if the browser supports MP4 format to play, does not support looking at the next FLV format, if not supported on the output "browser does not support video files in this format."
Iii. new Get/Manipulate element 1, new get elementdocument.querySelector("选择器");document.querySelectorAll("选择器");
2. New ACTION element class styledocument.querySelector("选择器").classList.add("类样式"); // 添加类样式document.querySelector("选择器").classList.remove("类样式"); // 移除类样式document.querySelector("选择器").classList.toggle("类样式"); // 反转类样式（有则删除，无则添加）document.querySelector("选择器").classList.contains("类样式"); //是否包含类样式document.querySelector("选择器").classList.item(索引); // 获取类样式
The way of Ps:classlist with Document.queryselector ("selector"). ClassName method Comparison:
Classlist method Additions and deletions do not clear the original class class style, but are added and removed on its basis. But the classname way directly to the source class style operation, is easy to omit and the mistake operation.
Example:
<! DOCTYPE html>
Iv. Custom AttributesDefinition: Starting with "data-", there must be at least one character followed by a "-" connection between multiple words.
Suggestions:
1, the name should be used in lowercase characters;
2. Do not include any special symbols in the name;
3, the name does not consist of pure numbers.
<p data-user-name="Daotin"></p>
Get the value of a custom property
<script> var pObj = document.querySelector("p"); var value = p.dataset["userName"]; console.log(value); // Daotin</script>
Gets the value of the custom property by using the " element. dataset[]" method. Where the name of the custom attribute is to be filled out using the hump naming method .
Learn the Web from scratch HTML5 (ii) forms, multimedia additions, new get action elements, custom attributes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
