I am attempting to fill in the persons name field on a page using puppeteer but cannot find the ID
<input placeholder="Enter Persons Name" type="text" data-marker="root/appPage/create/form/nameInput" class="sc-bdnxRM sc-dlMDgC sc-csTbgd jaediC hjOJya" value="Hello world">
How do I change "Hello World" without knowing the input's ID?
Thanks
You can test if another attribute of input is consistent in this site and try to use it (like a group of classes, the "data-marker" attribute, and others)
Otherwise, if you don't trust in these attributes, you can see around that input's parent elements, and use a selector like "#fatherElementId > input", for example.
Related
I saw the code below, in one of my studying codes:
<form>
<label for="firstName">First Name:(click here cause cursor go inside the input box)</label>
<input id="firstName" type="text">
</form>
I find that the pair of for and id attributes connect the label and input element in the way that the cursor goes inside the input box automatically by clicking on label.
Which other pair of HTML elements can be connected to each other by the for and id attributes set? If it works for many other HTML elements, is there any list or source of the default action occurred by connecting one of them in each pair element?
According to w3school, we can use for with <label> and <output> element. Here is the link.
Adding a for is important, even if they are adjacent. I seem to recall hearing that some screen readers for the visually impaired have problems otherwise. So if you want to be friendly to those who are perhaps using alternate browsers/screen readers, use this method.
I'm still a beginner and am still learning how to read and understand HTML. Within a login form in a website:
<form action="https://examplesite.jp/user.php" name="loginform" method="post">
<ul class="form">
<li class="title">E-MAIL ADDRESS</li>
<li class="text"><input type="text" name="uname"
id="legacy_xoopsform_block_uname" size="18" maxlength="60" value=""/>
</li>
<li class="title">PASSWORD</li>
<li class="pass">
<input type="password" name="pass" id="legacy_xoopsform_block_pass"
size="18" maxlength="12"/>
Part I do not understand is this part from above:
<input type="password" name="pass" id="legacy_xoopsform_block_pass"
size="18" maxlength="12"/>
I understand up to <input type="password" name="pass" /> part, but not after that especially how it's using id="legacy_xoopsform_block_pass".
How I am comprehending this code is that the type of input that will be sent to https:/examplesite.jp/user.php (using online form) is "password", and that is named "pass" but what's "id"? Especially email's acted as ID?
I read Difference between id and name attributes in HTML but don't really understand...
The ID attribute isn't used for any server side function, it is merely for styling (ill-advised) or more commonly used for hooking JavaScript functionality too.
So for example, you could use it to style the element in your CSS:
#legacy_xoopsform_block_uname {
background-color: black;
}
Or you could use it to do stuff in JavaScript:
$('#legacy_xoopsform_block_uname').on('click', function(){
alert('the input field has just been clicked);
});
Those are the only two situations you would use the ID, however I don't suggest the first option, I would use a class for that.
Essentially if you're not doing one of the above two things, you don't need and can safely get rid of it.
Welcome to SO. Please use google search, its your best friend!
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
Source
The name attribute value is a name of a query parameter. This is a name of data field, that will sent to server with your form. id is an unique identidicator of HTML element. There is no several elements with same id in valid HTML. Thus, id attribute is used for HTML element identification, but the name attribute is used for data field identification in HTTP request.
Please help me to explain about the div element of HTML be able to have attribute name or not?
for example :
I put attribute name inside it, Than I got warning.
Is it uneccessary to add attribute name?
Thank in advance
The name attribute is used with input elements to set the key of the submitted value. If you need to 'name' a div in order to address it from javascript or otherwise uniquely identify it on a page, you can use the id attribute. That said, most modern browsers will handle a name attribute on a div with no issues but it does not conform to HTML standards.
name is an attribute that is used for INPUT type elements. In a DOM a name is unique and you can use to access the element from JS or the backend scripting language.
For example. Lets say you have this form:
<form action ='process.php' method='POST'>
Username: <input type="text" name="un" /> <br/>
Password: <input type="password" name="pwd"/> <br/>
<input type="submit" name="submit" />
</form>
Now, lets say I put as username: Abe and as password: test
In the process.php file I can do:
echo $_POST['un'];
echo $_POST['pwd'];
And I will echo out the values for both fields.
And this brings an important point.
IDs and Names are not the SAME in HTML, IDs are used to quickly identify and add style to elements in the DOM whereas names are used by the backend script to process the form (PHP, .Net, etc).
I wonder when I was using <label> tag. Where for attribute used for name. I can't understand. What is the exactly difference between for and name in html.
If you are using for attribute for label tag then it must be in form.
This will work with its associative id within the form.
Ex
<label for="name"> First Name </label>
<input type="text" id="name" name="firstname">
AND
name attribute can not be used in label. It can be used for those input for textarea or for those tag which are used to get or pass the value from the form.
A label must be associated with a form control.
You can use a for attribute to create this association. If you do, then the value of the for attribute must be the same as the value of the id attribute of the form control.
There is no name attribute for label elements. The name attribute for form controls has nothing to do with labels (and is used as part of the algorithm used to construct the data to be sent to the server when the form is submitted).
The for= attribute in the label is used to link the label to one specific input on the page.
Since name= is not unique for inputs (I can have multiple inputs with the same name), the for= element on the label links to an id= attribute on the input.
The name attribute is used to determine under what name to submit the input.
<p>
<input type="text" id="search" name="keywords" />
<input type="submit" value="Search" name="Submit" />
</p>
For the above code I was getting validation errors, but once I removed the id="search" the validation was good and error-free. I thought you needed an id, but I'm wondering if it is supposed to be there?
Do you have any other elements with that id in the document? That would be the only reason for validation to fail. IDs are meant to be unique in the document, if you have it elsewhere it would be invalid.
IDs are good when you plan on doing some sort of client-side work on the element, as an element that has an ID can easily and quickly be retrieved by Javascript. It is also good when you are using <label> elements, as you can then use the for attribute (which takes an ID) to point to the field.
Other than that, it doesn't really matter.
You do not need the ID attribute. The name attribute is the one that gets passed.
Daniel is correct. A label's for attribute is associated with an input's name attribute. In this way, if you select a label with for="first_name", it will select the input with name="first_name".