HTML study notes four: Form (ii) advanced elements

Foreword

I wrote a blog post on the initial application form, are some of the basic form types, in addition to these basic elements, there are some high-level elements, such as url, enail, time, range, required , etc., will examine the following introduction. You can go to
HTML reference study notes summary catalog to see me the other notes about HTML.

url property

url property description applies to the site URL. Is the definition of a place to enter the URL in the form, content change place will be automatically verify the value of the url after submission. For example, you lose instead of a URL, it might remind you enter the correct URL and the like.

<input type="url" name="userurl"/>

<form >
	输入网址：<br>
	<input type="url" name="userurl"/>
</form>

email property

email property is to allow visitors to enter the email address of friends - and automatically verifies the value of the email field when submitting the form.

<form >
	输入email：<br>
	<input type="email" name="user_email"/>
</form>

That is, a change of type of difference, not to say.

date and time attributes properties

HTML5 adds the date and time of input types, including date, datetime, datetime_local, month, week and time. They mean the following table:

or a change of type of thing, we see a good date:

<form >
	<br>
	请选择你上次和小姑娘去看电影的时间：<br>
	<input type="date" name="user_date"/>
</form>

Last time I went to see the movie is about a little girl, "My Motherland", but watching the film did not become. . . T_T

number property

number attribute provides an input type of a digital input, the user can directly input a number, a symbol may be selected by the digital down:

<form >
	<br>
	输入你搞过几个对象：
	<input type="number" name="user_number"/>
</form>

range property

property as a display range control slider, like the number attribute, the user may use the max, min and step attributes to attribute range and step size control.

<form >
	<br>
	输入你搞过几个对象：
	<input type="range" name="user_range" min="2" max="10" step="1"/>
</form>

We can see that the slider is in default slider midpoint, we also found no digital display - then it is hard for me to CSDN a bit and found even if they wish to display digital custom function, also relates js and css, a little complicated, it will not read, can only continue to slowly learn to matter that much. @ T_T @
we want to see can point here: to achieve html5 slider function of ------ type = "range" properties

required attributes

required attribute specifies that an input field must be filled (not empty), required attributes for the following types of input attributes submit money: text, search, url, email, password, date, pickers, number, checkbox, radio and so on.

<form >
	下面输入用户登陆信息：<br>
	用户名称：<input type="text" name="user" required="required"><br>
	用户密码：<input type="password" name="password" required><br>
	<input type="submit" value="登陆">
</form>

We can see that it will not fill like the prompt. If you carefully look at the code of a small partner, then you can find

用户密码：<input type="password" name="password" required><br>

The sentence required = "required" has become shorthand required, it is entirely possible.

Exercise

Form on here, and then take a personal profile page try your hand at it, the screenshot section above are submitted content, so they should have put form area. It is <form> </ form> years.

<form >
	昵称：<input type="text" name="user" required="required"><br>
	实名：<input type="text" name="name_user"><br>
	生日：<input type="date" name="birthday"><br>
	地区：<select name="diqu" size="1">
		<option value="diqu1">四川</option>
		<option value="diqu2">北京</option>
		<option value="diqu3">浙江</option>
	    </select><br>
	行业：<input type="text" name="job"><br>
	职位：<input type="text" name="zhiwei"><br>
	简介：<textarea name="introduction" cols="50" rows="5"></textarea><br>
	<input type="submit" value="提交">
</form>

summary

Well, the form stop here again, and we can only do a simple page ugly, roughly equivalent to just learn C language to write a calculator, and then have all sorts of things, I do not feel simple HTML because it is too much stuff, like Python, Python say simple, but a few will really say it? A pair of good fuel so! Next post we can learn to insert audio and video files -
think it is helpful, it is a point to look at it like, oh welcome comments.