revision:
The readonly attribute is a boolean attribute. When present, it specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable.
A form will still submit an input field that is readonly, but will not submit an input field that is disabled!
The readonly attribute is supported by "text", "search", "url", "tel", "email", "password", "date", "month", "week", "time", "datetime-local", and "number" <input> types and the <textarea> form control elements. If present on any of these input types and elements, the "":read-only" pseudo class will match. If the attribute is not included, the "":read-write pseudo class will match.
<element readonly></element>
readonly means the content cannot be modified in an HTML document.
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="country">Country:</label>
<input type="text" id="country" name="country" value="Norway" readonly><br><br>
<input type="submit" value="Submit">
</form>
HTML codes:
<textarea style="margin-left:3vw;" rows="4" cols="50" readonly> Here you will learn how
to make a website. We just ask for some willingness to spend time and effort on understanding
the basics and develop some logical reasoning needed for front-end web construction. </textarea>
The rel attribute specifies the relationship between the current document and the linked document and is only used if the "href" attribute is present. Search engines can use this attribute to get more information about a link!
Supported HTML tags: <a> and link elements, such as <area>, <link> and <form>.
Multiple relationships can be defined by separating values with a space.
<element rel="value"></element>
alternate: provides a link to an alternate representation of the document (i.e. print page, translated or mirror);
author: provides a link to the author of the document;
bookmark: permanent URL used for bookmarking;
external: indicates that the referenced document is not part of the same site as the current document;
help: provides a link to a help document;
license: provides a link to licensing information for the document;
next: provides a link to the next document in the series;
nofollow: links to an unendorsed document, like a paid link; ("nofollow" is used by Google, to specify that the Google search spider should not follow that link);
noopener: requires that any browsing context created by following the hyperlink must not have an opener browsing context;
noreferrer: makes the referrer unknown. No referer header will be included when the user clicks the hyperlink;
prev: the previous document in a selection;
search: links to a search tool for the document;
stylesheet: refers to an external style sheet for the document;
tag: a tag (keyword) for the current document.
HTML codes:
<link rel='stylesheet' href='test.css' type='text/css'>
<p class="spec"><a rel='external' href='https://www.lwitters.com/index.php'>my website</a></p>
<p class="spec"><a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a></p>
Styled with CSS from the stylesheet.
HTML codes:
<link rel="stylesheet" href="/tutorial/style.css">
<p class="spec aliceblue">Styled with CSS from the stylesheet.</p>
When present, it specifies that the element must be filled out before submitting the form.
The "required" attribute can be used on the following elements:<input>, <select>, and <textarea>.
The required attribute is supported by "text", "search", "url", "tel", "email", "password", "date", "month", "week", "time", "datetime-local", "number", "checkbox", "radio", "file", <input> types along with the <select> and <textarea> form control elements. If present on any of these input types and elements, the ":required pseudo class" will match. If the attribute is not included, the ":optional pseudo class" will match.
<element required></element>
The required attribute specifies that the element must be filled out before submitting the form. This attribute is part of the built-in validation functionality in HTML.
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="username">username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>
The required attribute specifies that the user is required to select a value before submitting the form:
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
When present, it specifies that the list order should be descending (9,8,7...), instead of ascending (1, 2, 3...).
The reversed attribute can be used on the following element:<ol>.
<ol reversed></ol >
This attribute does not reverse the order of the list items. This attribute works for all numbering systems: numeric, alphabetic, and roman numerals.
codes:
<ol style="margin-left:3vw;" reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
List of all computer subjects are
codes:
<ol style="margin-left:3vw;" reversed>
<li>Data structures</li>
<li>Operating systems</li>
<li>python programming</li>
<li>DBMS</li>
<li>Computer network</li>
</ol>
The rows attribute specifies the visible height of a text area, in lines. The size of a textarea can also be specified by the CSS "height" and "width" properties.
The rows attribute can be used on the following element: <textarea>.
<textarea rows="number"></textarea>
number: specifies the height of the text area (in lines). Default value is 2.
codes:
<textarea style="margin-left:3vw;" rows="6" cols="50">By using the examples, tutorials,
and projects on my website, you will learn how to make a website. The only thing we ask
you for is to devote enpugh effort and time to his undertaking.</textarea>
codes:
<form style="margin-left:3vw;" name="user_info" action="action.php" method="post">
Name : <input type="text" name="name"><br>
email : <input type="text" name="email"><br>
Describe yourself : <br>
<textarea rows="10" cols="20" name="describe_yourself">
</textarea>
<input type="submit" name="submit" value="Submit">
</form>
The rowspan attribute specifies the number of rows a cell should span.
The rowspan attribute can be used on the following elements:<td> and <th>.
<td rowspan="number"></td>
number: specifies the number of rows a cell should span. rowspan="0" tells the browser to span the cell to the last row of the table section (thead, tbody, or tfoot). Chrome, Firefox, and Opera 12 (and earlier versions) support rowspan="0".
| Month | Savings | Savings for holiday! |
|---|---|---|
| January | $100 | $100 |
| February | $80 |
codes:
<table style="margin-left:3vw;">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan="3">Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="0">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<style>
table, th, td { border: 1px solid black;}
</style>
| Name | Age |
|---|---|
| Dennis | 24 |
| Hilde |
codes:
<table style="margin-left:3vw;">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Dennis</td>
<td rowspan="2">24</td>
</tr>
<tr>
<td>Hilde</td>
</tr>
</table>